Question

我通常在Angularjs项目中使用controllerAs语法，我认为在模板中会更清楚。
但是在当前的网络应用程序中，我遇到了以下问题：

function FirstCtrl() {
    this.name = 'First Controller';
}

function fooDirective() {
    return {
        scope: {
            testData:'='
         },
        name: 'ctrl',
        controller: 'FirstCtrl',
        controllerAs: 'foo',
        template: '<div>{{ foo.name }} {{testData}} {{foo.testData}}</div>',
        link: function ($scope, $element, $attrs, $ctrl) {
             console.log($ctrl.name);
        }
    };
 }

angular
    .module('app', [])
    .directive('fooDirective', fooDirective)
    .controller('FirstCtrl', FirstCtrl);

html部分如下：

<div ng-app="app">
    <foo-directive test-data="'newdata'"></foo-directive>
</div>

现场演示在这里：
https://jsfiddle.net/baoqger/rbp1wyfa/

我的困惑在于模板部分：

template: '<div>{{ foo.name }} {{testData}} {{foo.testData}}</div>',

{{testData}}可以很好地运作。但{{foo.testData}}不能。如何解决问题，以便我在控制器方式中访问隔离范围对象中的属性。

Answer 1

您希望将bindToController: true添加到指令定义中：

function fooDirective() {
    return {
        scope: {
            testData:'='
         },
        name: 'ctrl',
        controller: 'FirstCtrl',
        controllerAs: 'foo',
        bindToController: true,
        template: '<div>{{ foo.name }} {{testData}} {{foo.testData}}</div>',
        link: function ($scope, $element, $attrs, $ctrl) {
             console.log($ctrl.name);
        }
    };
}

适用文档为here（请注意，您必须向上滚动其浮动菜单/标题的位bc。）

angularjs：如何使用controllerAs访问模板中隔离范围指令的属性

1 个答案: