Question

我正在尝试在没有$ scope注入的指令中使用ControllerAs，而是使用它，而且当范围为：时我正在努力：

当我使用隔离范围时，一切正常，因为我可以使用bindToController: true，但在这种情况下，我错过了一些东西，我不知道是什么。

我有这个代码。如您所见，我正在尝试在我的指令中打印foo3（来自MyController）和foo4（来自MyDirectiveController）。这可以使用两个控制器中的$ scope注入轻松完成，但是当我尝试使用它时，我不知道我是否可以（以及如何）在我的指令中从MyController访问foo3。

angular
    .module("app",[])
    .controller('MyController', MyController)
    .controller('MyDirectiveController', MyController)
    .directive('myDirective', myDirective);

function MyController() {
    var vm = this;
    vm.foo3 = 'foo3';
}

function myDirective() {
    return {
        restrict: 'E',
        scope: true,
        controller: MyDirectiveController,
        controllerAs: 'vm',
        template: '{{vm.foo3}} - {{vm.foo4}}'
    }
}

function MyDirectiveController() {
    var vm = this;
    vm.foo4 = 'foo4'; 
}

这是jsfiddle。

Answer 1

在实例化MyController时，只需使用controllerAs语法。

<!-- Notice the "as vmMy" syntax : Now everything can be accessed via "vmMy." -->

<div ng-controller="MyController as vmMy"> 
    <my-directive></my-directive> 
</div>

现在，只要您使用vmMy.符号，它就可以从MyController的范围访问内容！

所以你的模板现在可以这样：

template: 'From MyController: {{vmMy.foo}}<br> From MyDirective: {{vm.foo2}}'

<强> jsFiddle update

在使用ControllerAs和范围的指令中访问父控制器范围：true

1 个答案: