从指令中的编译函数访问控制器

Question

我找遍了所有地方，但我唯一能想到的是我不了解有关编译函数工作原理的一些基本知识。

这是我的

angular.module("app", [])
.directive("foo", function(){
  return {
    scope: {},
    controller: function() {
      this.someValue = 23;
    },
    contollerAs: "ctrl",
    compile: function(tElem, tAttrs) {
      tElem.html("<h1>Data:  {{ctrl.someValue}}</h1>");
    },
    template: '<h1>test</h1>'
  }
});

这显示：数据： 并且似乎没有看到 "someValue" 变量。但是，当我使用范围而不是 controllerAs 语法时，它起作用了。

//this works fine
angular.module("app", [])
.directive("foo", function(){
  return {
    scope: {},
    controller: function($scope) {
      $scope.someValue = 23;
    },
    contollerAs: "ctrl",
    compile: function(tElem, tAttrs) {
      tElem.html("<h1>Data:  {{someValue}}</h1>");
    },
    template: '<h1>test</h1>'
  }
});

这显示：数据：23

这里有我遗漏的东西吗？我什至正确使用编译？手册似乎没那么有用。

Answer 1

因为打错了。是 controllerAs，不是 contollerAs。

建议使用template function而不是compile。这使得将来升级到组件更容易，也避免了问题 - 如果没有虚拟 <h1>test</h1> 模板，上面指令中的 compile 将无法正常工作。

从指令中的编译函数访问控制器

Accessing controller from compile function in directives

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-controlleras