27

我在这里尝试遵循 John Papa 的 angularJS 样式指南，并开始将我的指令切换为使用 controllerAs。但是，这是行不通的。我的模板似乎无法访问分配给 vm 的任何内容。请参阅展示该行为的这个非常简单的 plnkr 示例。

http://plnkr.co/edit/bVl1TcxlZLZ7oPCbk8sk?p=preview

angular
    .module('app', []);

angular
    .module('app')
    .directive('test', test);

function test() {
    return {
        restrict: 'E',
        template: '<button ng-click="click">{{text}}</button>',
        controller: testCtrl,
        controllerAs: 'vm'
    }
}

angular
    .module('app')
    .controller('testCtrl', testCtrl);

function testCtrl() {
  var vm = this;
  vm.text = "TEST";
}
4

5 回答 5

39

使用 controllerAs 语法时，您不会像往常一样访问 $scope，变量 vm 被添加到范围中，因此您的按钮需要变为：

<button ng-click="click">{{vm.text}}</button>

注意vm.添加到text.

这是应用了修复程序的 Plunk 的一个分支

问：你知道我将如何访问作为属性传递给指令的属性，例如“范围：{ text：'@'}”吗？然后我是否被迫在控制器上使用 $scope 并设置 vm.text = $scope.text？

答：在您引用的文章中，有一节 y075只讨论了这种情况。调查bindToController：

return {
    restrict: 'E',
    template: '<button ng-click="click">{{text}}</button>',
    controller: testCtrl,
    controllerAs: 'vm',
    scope: {
        text: '@'
    },
    bindToController: true // because the scope is isolated
};

然后你应该可以访问vm.text

于 2015-08-06T14:01:42.233 回答
4

使用“controllerAs”，控制器实例别名 -vm在您的情况下 - 作为范围的.vm属性发布在范围上。

因此，要访问其属性（即控制器的属性），您需要指定{{vm.text}}或ng-click="vm.click"。

于 2015-08-06T14:02:53.453 回答
1

当您使用controllerAs语法时，您必须使用 

bindToController: true

它将在您的指令中起作用。

于 2017-01-09T05:48:25.730 回答
1

当使用 ' controllerAs ' 语法时，如上所述，范围绑定到控制器的 ' this ' 引用。所以它允许我们引入一个新的命名空间（这里是'vm'）绑定到我们的控制器，而不需要将范围属性放在一个额外的对象文字中（比如$scope）。因此，访问控制器范围内的任何内容都需要“vm”命名空间，例如，

'<button ng-click="click">{{vm.text}}</button>'
于 2017-06-10T17:09:17.547 回答
0

我知道这张票很旧了。我加了 0.02 美元，以防将来有人偶然发现这个问题。

首先，最好有一些关于你想要实现的内容的背景，因为你似乎违反了设计规则。您的指令不需要知道控制器的内部工作原理，反之亦然。

我创建了一个简单示例，说明如何在指令中设置按钮的标题。这里不需要控制器，我认为这只会使您的示例难以遵循。

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function() {
  return {
    scope: {
      caption: "@"
    },    
    template: '<button>{{caption}}</button>'
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp">
  <my-directive caption="Hello World" />
</div>

于 2021-03-22T05:29:32.560 回答