Question

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

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

Answer 1

您不应该为它们分配相同的控制器。为每个控制器提供一个控制器，并使它们通过范围进行通信（如果需要，也可以使用隔离范围）或通过服务进行通信。

Answer 2

您的指令代码存在一些问题。关于将控制器名称包含在引号中的Suresh's comment似乎是一个问题，虽然我已经看到它有用without them，但我无法得到它。

你还有一个额外的大括号，你没有定义link虽然我想我们可以假设你已经把它拿到了某个地方但是把它留了出来。

另外一项是因为您已将控制器定义为＆＃39; vm＆＃39;，您希望在html中使用vm.data而不是vm。

Here's a plunker表明它正在处理这些变化。

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

2 个答案: