具有不同范围的多个 AngularJS 指令 [英] Multiple AngularJS directives with different scopes

问题描述

我在同一页面上有两个弹出指令.问题是当我点击一个时，它们都会弹出.

如何将每个范围彼此隔离，以便仅弹出被点击的弹出窗口?

HTML

<触发器><a href="#" data-ng-click="showPopup()">显示弹出窗口</a></触发器><流行>我弹出</pop></popup><popup class="popup"><触发器><a href="#" data-ng-click="showPopup()">显示弹出窗口</a></触发器><流行>我也弹出</pop></popup>

popup.js

angular.module('sembaApp').directive('popup', function () {返回 {限制:'E'，替换:真的，转置:真实，模板:'<div data-ng-transclude></div>',控制器:函数 postLink($scope, $element, $attrs) {$scope.popup = false;$scope.showPopup = function() {$scope.popup = !$scope.popup;}}}}).directive('触发器', 函数 () {返回 {要求:'^弹出'，限制:'E'，替换:真的，转置:真实，模板:'<div data-ng-transclude></div>',}}).directive('pop', function () {返回 {要求:'^弹出'，限制:'E'，替换:真的，转置:真实，模板:'<aside data-ng-transclude data-ng-show="popup">耶</一边>'}});

解决方案

简化指令可能是一个更好的主意，以便范围易于处理.

<div ng-app="sembaApp" ng-init="popup1=false;popup2=false;"><popup class="popup" ng-model="popup1"><pop data-ng-show="popup1">我弹出了</pop></popup><popup class="popup" ng-model="popup2"><pop data-ng-show="popup2">我也弹出了</pop></popup>

angular.module('sembaApp', []).directive('popup', function () {返回 {范围:{ngModel: '='},限制:'E'，替换:真的，转置:真实，模板:'<div data-ng-transclude><a href="#" data-ng-click="showPopup()">显示弹出窗口</a></div>',链接:函数 postLink($scope, $element, $attrs) {$scope.showPopup = 函数 () {console.log($scope.ngModel);$scope.ngModel = !$scope.ngModel;}}}})

jsFiddle 演示

Hi I have a two popup directives on the same page. The problem is when I click on one they both pop up.

How can I isolate each scope from each other so only the popup that's clicked pops up?

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

解决方案

It might be a better idea to simplify the directives so the scopes will be easy to handle.

<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

这篇关于具有不同范围的多个 AngularJS 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！