angularjs - 找不到指令所需的 Controller

Question

我有一个指令，我希望另一个指令能够调用。我一直在尝试使用指令 Controller 来尝试实现这一目标。

指令 1 与指令 2 位于同一页面，指令 1 将调用指令 2 的 Controller 公开的方法:

指令 1:

'use strict';
angular.module('angularTestApp')
    .directive('fileLibrary', function () {
        return {
            templateUrl: 'views/manage/file_library/file-library.html',
            require: 'videoClipDetails',
            restrict: 'AE',
            link: function postLink(scope, element, attrs, videClipDetailsCtrl) {
                scope.doSomethingInVideoClipDirective = function() {
                    videClipDetailsCtrl.doSomething();
                }
            }
        };
    });

指令二:

'use strict';
angular.module('angularTestApp')
    .directive('videoClipDetails', function () {
        return {
            templateUrl: 'views/video_clip/video-clip-details.html',
            restrict: 'AE',
            controller: function($scope, $element) {
                this.doSomething = function() {
                    console.log('I did something');
                }
            },
            link: function postLink(scope, element, attrs) {
                console.log('videoClipDetails directive');
                //start the element out as hidden
            }
        };
    });

使用两者并将其设置为 sibling 的文件:

<div>
    <div video-clip-details></div>
    <!-- main component for the file library -->
    <div file-library></div>
</div>

我知道阅读我拿起的文档，当指令位于同一元素上时， Controller 可以共享，这让我认为我可能以错误的方式看待这个问题。谁能让我走上正轨？

Answer 1

来自 angular.js documentation on directives

When a directive uses require, $compile will throw an error unless the specified controller is found. The ^ prefix means that this directive searches for the controller on its parents (without the ^ prefix, the directive would look for the controller on just its own element).

所以基本上你试图让 sibling 直接交流是不可能的。我遇到了同样的问题，但我不想使用服务进行通信。我想出的是一种使用父指令来管理其子代(即 sibling )之间通信的方法。我发布了 the example on github .

发生的情况是两个 child 都需要 parent ( require: '^parentDirective')和他们自己的 Controller ，这两者都被传递到链接函数中。从那里每个 child 都可以获得对父 Controller 及其所有公共(public)方法的引用，作为一种 API。

下面是其中一个 child itemEditor

function itemEditor() {
    var directive = {
        link: link,
        scope: {},
        controller: controller,
        controllerAs: 'vm',
        require: ['^itemManager', 'itemEditor'],
        templateUrl: 'app/scripts/itemManager/itemManager.directives.itemEditor.html',
        restrict: 'A'
    };

    return directive;

    function link(scope, element, attrs, controllers) {
        var itemManagerController = controllers[0];
        var itemEditorController = controllers[1];

        itemEditorController.itemManager = itemManagerController;

        itemEditorController.initialize();
    }

    function controller() {
        var vm = this;

        // Properties
        vm.itemManager = {};
        vm.item = { id: -1, name: "", size: "" };

        // Methods
        vm.initialize = initialize;
        vm.updateItem = updateItem;
        vm.editItem = editItem;

        // Functions
        function initialize() {
            vm.itemManager.respondToEditsWith(vm.editItem);
        }

        function updateItem() {
            vm.itemManager.updateItem(vm.item);
            vm.item = {};
        }

        function editItem(item) {
            vm.item.id = item.id;
            vm.item.name = item.name;
            vm.item.size = item.size;
        }
    }
}

注意值如何传递到 require数组是父指令的名称和当前指令的名称。这些都可以在 link 中访问。功能通过 controllers范围。将父指令的 Controller 分配为当前子指令的属性，然后可以通过该属性在子指令的 Controller 功能中访问它。

还要注意子指令的 link我称之为 initialize 的函数来自 child 的 Controller 的功能。这是建立部分通信线路的地方。

我基本上是说，只要您(父指令)收到编辑项目的请求，请使用我的这个名为 editItem 的方法这需要 item作为参数。

这是父指令

function itemManager() {
    var directive = {
        link: link,
        controller: controller,
        controllerAs: 'vm',
        templateUrl: 'app/scripts/itemManager/itemManager.directives.itemManager.html',
        restrict: 'A'
    };

    return directive;

    function link(scope, element, attrs, controller) {

    }

    function controller() {
        var vm = this;

        vm.updateMethod = null;
        vm.editMethod = null;

        vm.updateItem = updateItem;
        vm.editItem = editItem;
        vm.respondToUpdatesWith = respondToUpdatesWith;
        vm.respondToEditsWith = respondToEditsWith;

        function updateItem(item) {
            vm.updateMethod(item);
        }

        function editItem(item) {
            vm.editMethod(item);
        }

        function respondToUpdatesWith(method) {
            vm.updateMethod = method;
        }

        function respondToEditsWith(method) {
            vm.editMethod = method;
        }
    }
}

在父级中，您可以看到 respondToEditsWith将方法作为参数并将该值分配给它的 editMethod属性(property)。每当 Controller 的 editItem 时调用此属性。方法被调用， item对象被传递给它，因此调用子指令的 editItem方法。同样，保存数据的工作方式相反。

更新 : 顺便说一下，这里是 a blog post on coderwall.com我通过 require 的好例子得到了最初的想法和指令中的 Controller 选项。也就是说，他为该帖子中的最后一个示例推荐的语法对我不起作用，这就是我创建上面引用的示例的原因。