javascript - Angular指令链接函数的$scope中没有数据

Question

我有这个指令，它将 Controller 的 init 函数中的 test 变量设置为 abc 。但是，在我的链接函数中，test 变量未定义。

angular.module('module')
       .directive('directive', myDirective);

function myDirective() {
  var directive = {
    link: link,
    bindToController: true,
    controllerAs: 'dt',
    controller: Controller,
    ...
  };

  return directive;

  function link(scope, element, attrs) {
    ...
    scope.dt.initialize = function() {
      initializeDirective(scope, element, attrs);
    }
  }

  function initializeDirective(scope, element, attrs) {
    // not able to get scope.dt.test, it's undefined
    console.log(scope.dt.test); // undefined
  }
}

function Controller() {
  var vm = this;
  vm.test = '123';
  vm.create = function(data, config) {
    vm.test = 'abc';
    vm.initialize();
  }
  ...
}

在另一个 JavaScript 文件中创建该指令的代码。它正在调用create函数

// JavaScript in another file that inits the directive
var directive = vm.get(...);
vm.create(vm.data, config);

根据我的理解，由于 controllerAs，scope.dt 应该自动注入(inject)到链接函数中，它只是 scope.dt.test 不存在。

编辑

我将 test 变量放在 create 函数之外，并将其设置为 123。 console.log 现在记录 123，这不是我想要的(我想要 abc)。

Answer 1

这是因为您的链接函数在编译指令时执行。如果您在此之后调用 create ，那么您就晚了，并且变量“test”在编译时仍然未定义。

您可能想要的是将值指定为指令的属性:

angular
    .module('module')
    .directive('directive', myDirective);

    function myDirective(){
        return {
            link: link,
            bindToController: true,
            controllerAs: 'dt',
            controller: controller,
            scope: {
               test: '@'
            }
        };

        function controller(){
            var vm = this;
            // at this point vm.test is set to the value specified.
        }

        function link(scope, elem, attrs){
            // U can use scope.dt.test, scope.test or attrs.test here
        }
    }

将此指令用作:

<my-directive test="{{someValue}}"></my-directive>