AngularJS指令控制器是否需要父指令控制器？

我可能会完全反向思考这个问题，但我正在尝试创建三个嵌套指令，让我们调用它们：screen、component和widget。我希望小部件能够触发组件中的一些行为，这反过来又会触发屏幕中的一些行为。因此：

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        controller: function() {
            this.componentFunction = function() {
                WHAT.doSomethingScreeny();
            }
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})

<div screen>
    <div component>
        <div widget>
            <button ng-click="widgetIt()">Woo Hoo</button>
        </div>
    </div>
</div>

.directive（'screen'，function（）{
返回{
范围：正确，
控制器：函数（）{
this.doSomethingScreeny=函数（）{
警惕（“屏幕！”）；
}
}
}
})
.directive（'component'，function（）{
返回{
范围：正确，
控制器：函数（）{
this.componentFunction=函数（）{
什么，doSomethingScreeny（）；
}
}
}
})
.directive（'widget'，function（）{
返回{
范围：正确，
需要“^component”，
链接：函数（范围、元素、属性、组件Ctrl）{
scope.widgett=函数（）{
componentCtrl.componentFunction（）；
};
}
}
})
呜呼

我可以使用

require:“^component”

在小部件的链接fn中要求父组件，但我如何进一步授予组件控制器访问其包含屏幕的权限

我需要的是What-in组件，所以当你点击小部件的按钮时，它会提示“screeny！”

---

谢谢。

以下是两种解决问题的方法：

由于您使用的是

scope:true

，因此所有作用域通常都会继承。因此，如果您在

屏幕

控制器中的

$scope

而不是

this

上定义方法，那么

组件

和

小部件

都可以访问函数

doSomethingScreeny

。

在

组件上定义链接函数

和

要求：“^screen”

。在link函数中，将screenCtrl保存到scope属性，然后可以在指令的控制器中访问它（inject

$scope

）。

---

当您希望在创建控制器时直接从父控制器访问属性或方法时，大多数这些操作都会失败。通过使用依赖项注入和

$controller

服务，我找到了另一个解决方案

.directive('screen', function ($controller) {
    return {
       require: '^parent',
       scope: {},
       link: function (scope, element, attr, controller) {
           $controller('MyCtrl', {
                $scope: scope,
                $element: element,
                $attr, attr, 
                controller: controller
           });
       }
    }
})

.controller('MyCtrl, function ($scope, $element, $attr, controller) {});

---

此方法更易于测试，并且不会因不需要的控制器而污染您的作用域。

返回{scope:true}或返回{scope:false}对每个指令中controller:function（$scope）{}中的$scope变量没有影响，但必须将指令标记放入ng控制器或ng应用标记中

var myApp=angular.module（'myApp'，[]）
.directive（'屏幕'，函数（））{
返回{
范围：正确，
控制器：函数（）{
this.doSomethingScreeny=函数（）{
警惕（“屏幕！”）；
}
}
}
})
.directive（'component'，function（）{
返回{
范围：正确，
控制器：函数（$element）{
this.componentFunction=函数（）{
$element.controller（'screen'）.doSomethingScreeny（）；
}
}
}
})
.directive（'widget'，function（）{
返回{
范围：正确，
控制器：函数（$scope$element）{
$scope.widgetFunction=function（）{
$element.controller（'component'）.componentFunction（）；
}
}
}
})
.controller（'MyCtrl'，函数（$scope）{
$scope.name='Superhero'；
})

呜呼

谢谢。我最终选择了你的第一条。但无论哪种方式，似乎都必须将所有内容放到范围内，因此我不确定是否完全理解控制器的要点。或者更确切地说是它的用途。当然，我和AngularJS只呆了几个小时。你能给我提供一些有用的教程来解释服务、控制器和指令之间的关系吗？谢谢。@nicholas，无论您想在视图中显示什么，都必须在相关的$scope上。所以，控制器是模型（通常在服务中）和视图之间的粘合剂。控制器还通过函数向视图添加行为。另请参见和@MarkRajcok，我已经更新了，它演示了您的第二个选项，以便与您的第一个选项更加匹配。为此，我将屏幕和组件指令的控制器都包含在小部件的

链接中。此更改演示了指令如何通过使用字符串数组
要求
多个控制器。控制器允许指令交互（要求仅获取对控制器的引用）控制器总是比指令更容易测试，因为它们不需要您在测试时模拟DOM或模板。