如何在AngularJS中的指令模板中使用controllerAs语法

时间:2015-12-16 16:45:49

标签: angularjs angularjs-directive angularjs-controlleras

这是我的控制器:

angular
    .module('app')
    .controller('MyCtrl', MyCtrl);

Viewer.$inject = [];

function MyCtrl() {
  var vm = this;
  vm.titles = ['Hello', 'world'];
}

我的指示:

angular
    .module('app')
    .directive('myDirective', myDirective);

myDirective.$inject = [];

function flPagesArea($compile) {

    var directive = {
        link: link,
        restrict: 'EA',
        template: '<div ng-repeat="title in vm.titles">{{title}}</div>'
    };
    return directive;
}

结果是:

<!-- ng-repeat= title in vm.titles -->

我使用控制器的问题是,或者我遗漏了什么。 谢谢。

1 个答案:

答案 0 :(得分:1)

使用controllerAs选项和bindToController属性。还要检查与指令关联的函数的名称。在您的情况下,您永远不会将flPagesArea函数与模块中的指令声明相关联。

    angular
    .module('app')
    .directive('myDirective', myDirective);

myDirective.$inject = ['$compile'];

function myDirective($compile) {

    var directive = {
        link: link,
        restrict: 'EA',
        template: '<div ng-repeat="title in vm.titles">{{title}}</div>',
        controller: 'MyCtrl',
        controllerAs: 'vm',
        bindToController: true
    };
    return directive;
}