Question

我正在使用AngularJS指令。同时关注父/子指令之间的互动。我偶然发现了两种不同的方法，我想知道哪种方法更好。让我用一个例子来解释：

假设我们有calendar指令。该指令与Calendar模型交互，该模型具有当前显示日期的模型，以及日历中当前所选日期等附加信息。此外，在指令的模板中，我们有一个day指令列表，模型中每天都有一个指令。

<calendar>
    <day ng-repeat="day in Calendar.days"></day>
</calendar>

现在，假设我们想点击一天并更改Calendar模型中的选定日期。

方法1：日历范围内的设置方法和使用要求

myApp.directive('calendar', ['Calendar', function(Calendar){
    return {
        ...,
        controller: function($scope, $element, $attrs){
            this.setSelectedDay = function(day){
                 Calendar.setSelected(day);
            }
        }
    }
}]);

myApp.directive('day', [function(){
    return {
        ...,
        require: '^calendar',
        controller: function($scope, $element, $attrs, calendarCtrl){
            $element.on('click', function(){
                calendarCtrl.setSelectedDay($scope.day);
            })
        }
    }
}]);

方法2：日间活动

myApp.directive('calendar', ['Calendar', function(Calendar){
    return {
        ...,
        controller: function($scope, $element, $attrs){
            $scope.$on('daySelected', function(event, arg){
                //this call should be wrapped in $scope.$apply
                Calendar.setSelected(arg);
            })
        }
    }
}]);

myApp.directive('day', [function(){
    return {
        ...,
        link: function postLink($scope, $element, $attrs) {
            $element.on('click', function () {
                //tell to my parents 'I have been clicked!'
                $scope.$emit('daySelected', $scope.day);
            });
        }
    }
}]);

现在，由于这两种方法似乎都需要指令层次结构，我会说第二种方法更好，因为我不会在calendarCtrl中注入day。但是一切都可以通过事件解决，我猜require不会存在。所以我的问题是：这两种方法中的一种明显优于另一种吗？什么时候我应该更喜欢第一个（或反之），为什么？

Answer 1

我想了几天。由于它没有触发讨论，我发布了自己的答案。

1）当您拥有需要通信的固定指令层次结构时，请选择 REQUIRE 。

实施例

<accordion-group>
    <accordion></accordion>
    <accordion></accordion>
</accordion-group>

在这种情况下，当accordion打开时，它可以利用accordionGroup控制器中的一种方法关闭所有其他方法。

2）当您需要从指令传达某些事情时，请选择 EVENTS ，但您不知道需要对该事件作出什么反应。< / p>

指令互动：需要与事件

1 个答案: