Angularjs 将ControllerAs与指令一起使用

我正试图遵循John Papa的angularJS风格指南，并已开始将指令转换为使用controllerAs。然而，这是行不通的。我的模板似乎无法访问分配给vm的任何内容。请看这个展示行为的非常简单的plnkr示例

angular
.module（'app'，[]）；
有棱角的
.module（'应用程序'）
.指令（“测试”，测试）；
功能测试（）{
返回{
限制：'E'，
模板：“{text}}”，
控制器：testCtrl，
controllerAs:'vm'
}
}
有棱角的
.module（'应用程序'）
.controller（'testCtrl'，testCtrl）；
函数testCtrl（）{
var vm=这个；
vm.text=“测试”；
}

使用controllerAs语法时，您不会像通常那样访问$scope，变量vm会添加到scope中，因此您的按钮需要变成：

{{vm.text}

注意

vm.

添加到

文本的开头



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

答：在你提到的那篇文章中，有一篇文章谈到了这种情况。查看
bindToController
：

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

返回{
限制：'E'，
模板：“{text}}”，
控制器：testCtrl，
controllerAs:'vm'，
范围：{
正文：“@”
},
bindToController:true//因为作用域是隔离的
};

然后您应该能够使用“controllerAs”访问
vm.text
，控制器实例别名-
vm
，在您的情况下，作为作用域的
.vm
属性发布在作用域上

因此，要访问其属性（即控制器的属性），需要指定
{{vm.text}
或
ng click=“vm.click”
当使用controllerAs语法时，必须使用

bindToController: true

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

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

“{{vm.text}”
我意识到这张票很旧了。我加上我的0.02美元，以防将来有人偶然发现

首先，有一些关于你想要实现的东西的背景是很好的，因为你似乎正在打破设计规则。指令不需要知道控制器的内部工作，反之亦然

我创建了一个简单的示例，说明如何在指令中设置按钮的标题。这里不需要控制器，我想这会让你的例子很难理解


var myApp=angular.module（'myApp'，[]）；
myApp.directive（'myDirective'，function（）{
返回{
范围：{
标题：“@”
},    
模板：“{{caption}}”
};
});

谢谢。您知道如何访问作为指令属性传递的属性吗，例如“scope:{text:'@'}”？然后，我是否被迫在控制器上使用$scope并设置vm.text=$scope.text？仅供参考，在
controllerAs之后缺少一个逗号：“vm”
@Tr1stan简单而精确的回答在这种方法中，函数testCtrl和test被保留在全局范围内，我不想这样做。您能建议我一种替代方法吗
'<button ng-click="click">{{vm.text}}</button>'