不同範圍的多個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; 
    } 
    }