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

Question

这是我的控制器：

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

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

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

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

How to use a controllerAs syntax within a directive template in AngularJS

angularjs

angularjs-directive

angularjs-controlleras