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

我通常在Angularjs项目中使用

controllerAs

语法，我认为这在模板中会更清楚。
但在当前的web应用程序中，我遇到了如下问题：

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);

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

函数FirstCtrl（）{
this.name='First Controller'；
}
函数指令（）{
返回{
范围：{
测试数据：'='
},
名称：“ctrl”，
控制器：“FirstCtrl”，
controllerAs:“foo”，
模板：{{foo.name}{{testData}{{foo.testData}}，
链接：函数（$scope、$element、$attrs、$ctrl）{
log（$ctrl.name）；
}
};
}
有棱角的
.module（'应用程序'，[]）
.指令（'foodirection'，foodirection）
.controller（'FirstCtrl'，FirstCtrl'）；

html部分如下所示：

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);

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

现场演示就在这里：

我的困惑点在于模板部分：

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

template:{{{foo.name}{{{testData}}{{foo.testData}}}，

---

{{testData}}

可以很好地工作。但是

{{foo.testData}}

不能。如何解决这个问题，以便以controllerAs方式访问隔离范围对象中的属性

要将

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);
        }
    };
}

函数指令（）{
返回{
范围：{
测试数据：'='
},
名称：“ctrl”，
控制器：“FirstCtrl”，
controllerAs:“foo”，
bindToController：对，
模板：{{foo.name}{{testData}{{foo.testData}}，
链接：函数（$scope、$element、$attrs、$ctrl）{
log（$ctrl.name）；
}
};
}

---

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

谢谢。它工作得很好。我错过了这样的参数……谢谢，不用谢——指令定义可能有点复杂，很容易错过文档中的内容。很乐意帮忙！