javascript - 如何解决嵌套指令范围问题？

Question

我正在使用 ionic :我创建了一个“通知”指令，该指令进行一些预处理以确定要根据属性中传递的对象显示什么类型的通知(“警报”、“消息”或“重要消息”) 。在该指令的模板中，我调用另一个名为“更新通知”的指令 - 这是一个项目选项，当用户将项目滑到左侧并且(应该)使用模型调用更新模式时，会显示该选项通过属性“通知”传递。

我遇到的问题是“更新通知”的模板正在调用 showUpdateNotification() 但它似乎正在调用“通知”指令的作用域函数；即使“更新通知”指令具有已定义的范围。

我想在“更新通知”指令中定义更新功能，以便能够使用另一个模板在应用程序的其他位置调用它，但我不确定如何解决我的范围问题。

感谢您的帮助!

通知指令:

.directive("notification", function($rootScope, BibleService, FirebaseLoginService){
    return{
        restrict: 'AE',
        scope:{
            type: '@?type',
            message: '=?message'
        },
        replace: true,
        template: "<div ng-include='contentUrl'></div>",
        link: function(scope, element, attrs){
            scope.contentUrl = 'templates/directives/' + attrs.file + '.html';
               attrs.$observe("file",function(v){
                   scope.contentUrl = 'templates/directives/' + v + '.html';
               });

        },
        controller: function($scope, $rootScope){
            //something interesting here.
            $scope.hidden = false;
            $scope.leaderImage = "";
            $scope.notification = "";
            $scope.canEdit = false;

            if($scope.message){
                $scope.leaderImage = $scope.message.leader.image;
                if($scope.message.important){
                    $scope.type ="important"

                }else{
                    $scope.type = "message"
                }

                if(FirebaseLoginService.loggedUser().id === $scope.message.leader.id){
                    $scope.canEdit = true;
                }else{
                    $scope.canEdit = false;
                };

            }




            if($scope.type === "alert" && $rootScope.pastDue){
                $scope.title = "ATTENTION:"
                $scope.notification = $rootScope.pastDueNotification;

            }else if($scope.type === "message"){
                if($scope.message){
                    $scope.title = $scope.message.title;
                    $scope.notification = $scope.message.text;
                }

            }else{
                if($scope.message){
                    $scope.title = $scope.message.title;
                    $scope.notification = $scope.message.text;
                }

            }

            $scope.closeNotification = function(){
                $scope.hidden = true;
            }           
        }
    };
});

通知模板:

<ion-list show-delete="false" can-swipe="true">  
<ion-item ng-if="type === 'alert'" ng-hide="hidden" class="item item-icon-left notification-alert item-text-wrap" ng-href="#/app/billing">
<i class="icon ion-alert-circled light"></i>
<h2 class="light"><b>{{title}}</b></h2><hr>
<p><span class="light"><b>{{notification}}</b></span></p>
<ion-option-button class="button-calm" ng-click="closeNotification()">
  Close
</ion-option-button>
</ion-item>

<ion-item ng-if="type === 'important'" ng-hide="hidden" class="item item-icon-left notification-important item-text-wrap">
<i class="icon ion-android-hand royal"></i>

<div class="row">
    <div class="col-80">
        <h2 class="light"><b>Important Message: </b></h2>
        <hr><p ng-if="title"><span class="royal"><b>{{title}}</b></span></p>
        <p class="small"><span class="light"><b>{{notification}}</b></span></p> 
        {{message}}
    </div>
    <div class="col-20">
        <img class="notification-thumb" ng-src="{{leaderImage}}" alt="">
    </div>
</div>

<update-notification notification="message" file="updateNotificationOption"></update-notification>
<ion-option-button class="button-calm" ng-click="closeNotification()">
  Close
</ion-option-button>
</ion-item>

<ion-item ng-if="type === 'message'" ng-hide="hidden" class="item item-icon-left notification-message item-text-wrap">
<i class="icon ion-paper-airplane dark"></i>

<div class="row">
    <div class="col-80">
        <h2>Message:</h2>
        <hr><p ng-if="title"><b>{{title}}</b></p>
        <p class="small">{{notification}}</p>
        {{message}}
    </div>
    <div class="col-20">
        <img class="notification-thumb" ng-src="{{leaderImage}}" alt="">
    </div>
</div>

<update-notification notification="message" file="updateNotificationOption"></update-notification>
<ion-option-button class="button-calm" ng-click="closeNotification()">
  Close
</ion-option-button>
</ion-item>

更新通知指令:

.directive("updateNotification", function($rootScope, $localStorage, $timeout, $ionicListDelegate, ChurchService){
    return{

        restrict: 'E',
        scope:{
            notification: '='
        },
        replace: true,
        template: "<div ng-include='contentUrl'></div>",
        link: function(scope, element, attrs){
            scope.contentUrl = 'templates/directives/' + attrs.file + '.html';
               attrs.$observe("file",function(v){
                   scope.contentUrl = 'templates/directives/' + v + '.html';
               });

        },
        controller: function($scope, $ionicModal, $location){
            var ctrl = this;
            $scope.notice = $scope.notification;
            var church = {};

            ChurchService.getbyLeader($localStorage.seedUser.leadershipID).then(function(ch){
                church = ch;
            });

            $scope.updateNotification = function (data) {
                $rootScope.show('Updating notification...');

                if(church.notifications){
                    for (var i=0; i<church.notifications.length; i++){
                        var note = church.notifications[i];
                        if(note.date === data.date){
                            note = data;
                        }
                    }
                }

                ChurchService.update(church).then(function(){
                    $scope.closeUpdateNotification();
                    $location.path('/app/church/'+data.id);
                    $rootScope.hide();
                }, ctrl.updateNotificationFailure);

            };

            ctrl.updateNotificationFailure = function(error) {
                console.log('POST ERROR:', error);
                $rootScope.notify("The Notification wasn't updated. Please try again later.")
            };

            $ionicModal.fromTemplateUrl('templates/updateNotification.html',{
                scope: $scope
            }).then(function(modal){
                $scope.updateNotificationModal = modal;
            });

            // Open the update modal
            $scope.showUpdateNotification = function() {
                $scope.updateNotificationModal.show();
                $ionicListDelegate.closeOptionButtons();
                //console.log($scope.prayerObj);

            };

            // Triggered in the update modal to close it
            $scope.closeUpdateNotification = function() {
                $scope.updateNotificationModal.hide();

            };
        }
    };
});

更新通知模板:

<ion-option-button class="button-balanced" ng-click="showUpdateNotification()">
Edit
</ion-option-button>

这是一个Plunker (抱歉，Sass 翻译得不好 - 看起来很糟糕)

Answer 1

我无法真正找到解决您的示例的方法，因此我不会提供特定于您的示例的答案，而是介绍大多数人实现指令间沟通的方式。

范围回调

这可能是从内部范围到外部实体通信最常用的方法。请注意，我说的是“外部实体”而不是“外部范围”。这是因为它并不只适用于指令到指令的通信。在内部指令中，您建立一个回调，如下所示:

directive = {
    scope: {
        onFoo: '&'
    },
    link: function($scope, elem, attrs){
        elem.bind('onClick', function(evt){ 
             //with no callback params
             $scope.onFoo()

             //with callback params
             $scope.onFoo({ $args:'foo' })
        }
    }
}

您可以在使用指令的模板中声明这一点，其中 doSomething 是在 Controller 上定义的方法:

<my-directive on-foo="doSomething()"/>

或者使用回调参数

<my-directive on-foo="doSomething($args)"/>

<小时/>

通过 require 进行真正的指令到指令通信

让指令相互通信的一种更复杂的方法是在定义指令时使用 require 字段。当自定义指令需要作为输入的 ng-model 时，您会看到它一直在使用。示例:

directive = {
    require: '^ngModel',
    link: function($scope, elem, attrs, ngModel){
        ngModel.parsers.push( function(){ ... })
    }
}

在上面的示例中，指令可以访问所需的 ngModelController API。在您的情况下，您可以在外部指令上定义一个 Controller ，然后在内部指令中需要它:

outerDirective = {
    controllerAs: 'outer',
    controller: function(){ 
         function OuterDirectiveController(){ ... }
         OuterDirectiveController.prototype.doOuter = function(){ ... }
         return OuterDirectiveController
    },
    template: '<div><input><div>...</div><div inner-directive></inner-directive>'
 }

在本例中，为了简洁起见，我只是在外部指令的模板内声明了内部指令。

 innerDirective = {
      require: 'outerDirective',
      link: function($scope, elem, attrs, outerDirective){
           elem.bind('submit', function(){ outerDirective.doOuter()})
      }
 }

<小时/>

事件总线

这是跨多种不同技术和语言与 MVC 框架的各个组成部分进行通信的经典方式。这当然不是 Angular 做事方式，我通常不会推荐这种方法，除非你无法让其他任何东西发挥作用。它还受范围层次结构的影响。最后，它的主要缺点是它要求指令以某种方式了解事件，因此必须有一些商定的事件接口(interface)。

 outerDirective = {
      link:function($scope, elem, attrs){  
           $scope.$on( 'decendentEvent', function( evt, data ){ ... })
      }
 }


 innerDirective = {
      link:function($scope, elem, attrs){  
           elem.bind('submit', function(){
               $scope.$emit( 'decendentEvent', { foo:123 })
           }
      }
 }