angularjs - 使用 ControllerAs 语法从指令 Controller 访问父属性并且没有 $scope 注入(inject)

Question

这是来自 this 的后续问题.

如何从 MyDirectiveController 访问 MyController 中定义的属性以更改其值或仅读取它并将其用于其他用途？ (代码中的注释行)。

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

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

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

function MyDirectiveController() {
    var vm = this;
    vm.foo = 'fooDirective'; 

    // vmMyfoo = 'fooDirective';
}

这是 jsfiddle .

Answer 1

您可以使用 bindToController (从 v1.3.x 开始可用)设置指令以将值绑定(bind)到 Controller 实例而不是范围对象。

function myDirective() {
    return {
        restrict: 'E',
        scope: {
            value: '='
        },
        controller: MyDirectiveController,
        controllerAs: 'vm',
        bindToController: true,
        template: '{{vm.value}} - {{vm.foo}}'
    }
}

在 HTML 中，您可以像这样将值传递给指令:

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