AngularJS:使用同一控制器收发

AngularJS: transcluded with same controller

本文关键字：控制器 收发 AngularJS      更新时间：2023-09-26

我有一个指令，它包装另一个指令如下：

<div direction from="origin" to="destination">
    <div direction-map line-color="#e84c3d"></div>
</div>

direction-map指令已被屏蔽，请参阅我的代码（Fiddle在此处可用）：

var directionController = function() {
    //do stuffs
};
var directionMapController = function() {
    //do other stuffs
};
var Direction = angular.module("direction", [])
    .controller("directionController", directionController)
    .controller("directionMapController", directionMapController)
    .directive("direction", function() {
        var directive = {
            restrict: "AEC",
            controller: "directionController",
            scope: {},
            transclude: true,
            link: {
                pre: function($scope, $element, attrs, controller, transclude) {
                    console.log("direction's controller is directionController : ");
                    console.log(controller.constructor === directionController);//true, that's ok
                    transclude($scope, function(clone) {
                        $element.append(clone);
                    });
                }
            }
        };
        return directive;
    })
    .directive("directionMap", function() {
        var directive = {
            require: "^direction",
            controller: "directionMapController",
            restrict: "AEC",
            scope: true,
            link: {
                pre: function($scope, $element, $attrs, controller) {
                    console.log("directionMap's controller is directionMapController :");
                    console.log(controller.constructor===directionMapController);//false that's not OK!!!!
                }
            }
        };
        return directive;
    });

所以我的问题是：

为什么我的子指令direction-map将其父指令的控制器作为参数（我认为这是因为它被transclude了），有可能避免这种情况吗？还是我应该重新思考我的代码？

发生这种情况是因为您正在使用require: "^direction"，如果删除此行，指令将获得其自身的控制器，而不是父控制器。

希望有帮助：）

更新的Fiddle

相关文章：