不同范围的多个AngularJS指令

Question

嗨我有两个弹出式指令在同一页上。问题是当我点击一个他们都弹出。

如何隔离每个范围，以便只弹出被点击的弹出窗口？

HTML

<popup class="popup"> 
    <trigger> 
    <a href="#" data-ng-click="showPopup()">Show Popup</a> 
    </trigger> 
    <pop> 
    I popped up 
    </pop> 
</popup> 

<popup class="popup"> 
    <trigger> 
    <a href="#" data-ng-click="showPopup()">Show Popup</a> 
    </trigger> 
    <pop> 
    I popped up too 
    </pop> 
</popup> 

popup.js

angular.module('sembaApp') 
    .directive('popup', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<div data-ng-transclude></div>', 
     controller: function postLink($scope, $element, $attrs) { 
     $scope.popup = false; 
     $scope.showPopup = function() { 
      $scope.popup = !$scope.popup; 
     } 
     } 
    } 
    }) 
    .directive('trigger', function() { 
    return { 
     require: '^popup', 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<div data-ng-transclude></div>', 
    } 
    }) 
    .directive('pop', function() { 
    return { 
     require: '^popup', 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<aside data-ng-transclude data-ng-show="popup"> yay</aside>'  
    } 
    }); 

Answer 1

这可能是一个更好的主意，简化指令，因此该范围将很容易处理。

<div ng-app="sembaApp" ng-init="popup1=false;popup2=false;"> 
    <popup class="popup" ng-model="popup1"> 
     <pop data-ng-show="popup1">I popped up</pop> 
    </popup> 
    <popup class="popup" ng-model="popup2"> 
     <pop data-ng-show="popup2">I popped up too</pop> 
    </popup> 
</div> 

angular.module('sembaApp', []) 
    .directive('popup', function() { 
    return { 
     scope:{ 
      ngModel: '=' 
     }, 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<div data-ng-transclude><a href="#" data-ng-click="showPopup()">Show Popup</a></div>', 
     link: function postLink($scope, $element, $attrs) { 
      $scope.showPopup = function() { 
       console.log($scope.ngModel); 
       $scope.ngModel = !$scope.ngModel; 
      } 
     } 
    } 
}) 

Demo on jsFiddle

Answer 2

为了确保每个指令，因为不同的范围，你可以一个scope : true添加到您的指令函数返回的对象。

你一定要检查出documentation（“写入指令（长版）”），它解释了scope属性，如何范围隔离，绑定参数等方面的力量......

这stackoverflow question提供了更好的解释。

Answer 3

得到它通过改变$ scope.popup努力this.popup

<popup class="popup"> 
    <a href="#" data-ng-click="showPopup()">Show Popup</a> 
    <pop> 
     I popped up 
    </pop> 
    </popup> 

    controller: function postLink($scope, $element, $attrs) { 
    this.popup = false; 
    $scope.showPopup = function() { 
     this.popup = !this.popup; 
    } 
    }