AngularJS:重用具有不同父级的组件

Question

假设我有 A 和 B 可重用组件。我希望 B 在 A 上调用一个方法——当然前提是 B 是 A 的子级。此外——我希望 B 用作独立组件(没有 A 作为父级)。在这种情况下，不应该调用来自不存在的 A 的方法。我的第一次尝试是在链接函数中获取 Controller (就像我在 B 上指定了 require: "^A" 一样 - 现在我不能拥有它，因为我也想将 B 用作一个独立的组件)-但这不起作用:

var module = angular.module("mymodule", []);

// <A>
module.directive("A", function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {},
        controller: function($scope, $element, $attrs) {
            this.register = function() {
               console.log("Hooray!");
            };
        },
        template:
            '<div class="ng-a" ng-transclude></div>'
    };
});

// <B>
module.directive("B", function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {},
        link: function($scope, $element, $attrs, refA) {
            if (refA !== undefined) {
                refA.register();
            } else {
                console.log("Standalone");
            }
        },
        controller: function($scope, $element, $attrs) {
            // Do something.
        },
        template:
            '<div class="ng-b" ng-transclude></div>'
    };
});

用例:

<A><B></B></A><B></B>

控制台输出应该是:

Hooray!
Standalone

有什么想法吗？谢谢!

Answer 1

您可以有条件地要求另一个指令，并在其前面加上问号:require: "^?A"。然后，您可以测试 Controller 是否为非空，以查看您是在父指令内还是作为独立指令被调用。