SCOPE-CALLBACK

Question

我使用离子：我创建了一个＆＃34; Notification＆＃34;指令执行一些预处理以确定哪种类型的通知（＆＃39;警报＆＃39;，＆＃39;消息＆＃39;重要消息＆＃39;）显示基于属性中传递的对象。在该指令的模板中，我正在调用另一个名为＆＃34; Update Notification＆＃34;的指令。 - 这是一个项目选项，当用户向左滑动项目并且（应该）调用具有表单的更新模式时，该项目选项会通过属性＆＃34;通知来传递模型。＆＃ 34;

我遇到的问题是＆＃34;更新通知＆＃34;的模板。正在呼叫showUpdateNotification()，但它似乎在呼叫＆＃34;通知＆＃34;指令的范围功能;即使＆＃34;更新通知＆＃34;指令有一个明确的范围。

我想在＆＃34;更新通知＆＃34;中定义更新功能。指令能够使用其他模板在应用程序的其他位置调用它，但我不确定如何解决我的范围问题。

感谢您的帮助！

通知指令：

.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

我无法真正找到你的榜样，所以我不会提供一个特定于你的例子的答案，我将介绍大多数人实现指令到指令沟通的方式。

SCOPE-CALLBACK

这可能是从内部范围到外部实体进行通信的最常用方法。注意我说＆＃34;外部实体＆＃34;而不是＆＃34;外部范围＆＃34;。这是因为它不是指令到指令通信的专有。在inner指令中，你建立一个如下的回调：

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是在您的控制器上定义的方法：

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

或使用回调参数

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

通过`require`

进行真实的指令通信

使用指令相互通信的更复杂方法是在定义指令时使用require字段。您可以看到，当自定义指令require为输入的模型时，它始终使用。例如：

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

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

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()})
      }
 }

EVENT BUS

这是一种与许多不同技术和语言的MVC框架的各种组成部分进行通信的经典方式。它肯定不是角色的做事方式，我通常不会推荐这种方法，除非你无法获得其他任何工作。它也受范围层次结构的制约。最后，它的主要缺点是它需要指令以某种方式知道事件，因此必须有一些商定的事件接口。

 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 })
           }
      }
 }

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

1 个答案:

SCOPE-CALLBACK

通过`require`

EVENT BUS

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

1 个答案:

SCOPE-CALLBACK

通过require

EVENT BUS

通过`require`