Question

假设我有A和B可重复使用的组件。我希望B在A上调用一个方法 - 当然只有当B是A的孩子时。另外 - 我希望B用作独立组件（没有A作为父组件）。在这种情况下，不应调用来自不存在的A的方法。我的第一个尝试是获得链接功能中的控制器（完全与我在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"。然后，您可以测试控制器是否为null，以查看您是在父指令内调用还是作为独立调用。

AngularJS：使用不同父级重用组件

1 个答案: