Angular.js 1.2 使用 IIFE 分离控制器和指令答案

【问题标题】：Angular.js 1.2 separating Controllers and Directives using an IIFEAngular.js 1.2 使用 IIFE 分离控制器和指令
【发布时间】：2016-09-07 05:51:21
【问题描述】：

当我尝试在包装在 IIFE 中的指令中定义控制器时，我似乎遇到了错误。虽然我可以通过在 tableHelper.html 的 div 上添加 ng-controller 来解决这个问题。我想知道下面的代码将 tableHelperCtrl 返回为未定义。

使用 angular.js 1.2.29

app.module.js

(function () {
    'use strict';

    angular.module('app', [

    ]);
})();

tableHelper.controller.js

(function () {
    'use strict';

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

    function tableHelperCtrl() {

        var vm = this;
        vm.data = 'some data'
    }
})();

tableHelper.directive.js

(function () {
    'use strict';

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

    function tableHelper() {

        var directive = {
            restrict: 'A',
            templateUrl: './src/app/tableHelper/tableHelper.html',
            link: link,
            controller: tableHelperCtrl,
            controllerAs: 'vm'

        };
        return directive;
        }
    }
})();

tableHelper.html

<div>
    <p>Table Helpers Directive</p>
    <table>
        <thead></thead>
        <td>{{vm}}</td>
    </table>
</div>

【问题讨论】：

您需要将controller: tableHelperCtrl 转至controller: 'tableHelperCtrl'

标签： angularjs iife

【解决方案1】：

您不应为它们分配相同的控制器。给他们一个控制器，让他们通过范围（如果需要也使用隔离范围）或通过服务进行通信。

【讨论】：

【解决方案2】：

您的指令代码存在几个问题。 Suresh's comment 关于将控制器的名称用引号括起来似乎是一个问题，尽管我已经看到它可以工作 without them，但我无法理解。

你还有一个额外的右花括号，你没有定义link，尽管我想我们可以假设你在某个地方找到了它，但把它省略了。

还有一项是，由于您已将控制器定义为“vm”，因此您希望在 html 中使用 vm.data 而不仅仅是 vm。

Here's a plunker 表明它正在处理这些更改。

【讨论】：