多AngularJS指令与不同的范围

问题描述

您好我有相同的页面上两个弹出指令。问题是，当我点击一个，他们都弹出。

我怎么能隔离每个范围相互所以才有了弹出窗口，用户点击该广告弹起？

HTML

＆LT;弹出类=弹出＆GT;
  ＆LT;触发器和GT;
    ＆LT; A HREF =＃数据-NG-点击=showPopup（）＆gt;显示弹出＆LT; / A＆GT;
  ＆LT; /触发＆GT;
  ＆LT;流行GT;
   我弹出
  ＆LT; /流行＆GT;
＆LT; /弹出＆GT;＆LT;弹出类=弹出＆GT;
  ＆LT;触发器和GT;
    ＆LT; A HREF =＃数据-NG-点击=showPopup（）＆gt;显示弹出＆LT; / A＆GT;
  ＆LT; /触发＆GT;
  ＆LT;流行GT;
   我突然出现了太多
  ＆LT; /流行＆GT;
＆LT; /弹出＆GT;


popup.js

angular.module（'sembaApp'）
  .directive（'弹出'，函数（）{
    返回{
        限制：'E'，
        更换：真实，
      transclude：真实，
      模板：'＆LT; D​​IV数据-NG-transclude＆GT;＆LT; / DIV＆GT;，
      控制器：功能postLink（$范围，$元，$ ATTRS）{
        $ scope.popup = FALSE;
        $ scope.showPopup =功能（）{
          $ scope.popup = $ scope.popup！;
        }
      }
    }
  }）
  .directive（'扳机'，函数（）{
    返回{
        要求：'^弹出'，
        限制：'E'，
        更换：真实，
      transclude：真实，
      模板：'＆LT; D​​IV数据-NG-transclude＆GT;＆LT; / DIV＆GT;，
    }
  }）
  .directive（'流行'，函数（）{
    返回{
        要求：'^弹出'，
        限制：'E'，
        更换：真实，
      transclude：真实，
      模板：'＆LT;抛开数据-NG-transclude数据-NG-秀=弹出＆GT;耶＆LT; /一旁＆GT;'
    }
  }）;


解决方案

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

 ＆LT; D​​IV NG-应用=sembaAppNG-的init =popup1 = FALSE; popup2 = FALSE;＆GT;
    ＆LT;弹出类=弹出NG模型=popup1＆GT;
        ＆LT;弹出数据-NG-秀=popup1I标记弹出＆LT; /流行＆GT;
    ＆LT; /弹出＆GT;
    ＆LT;弹出类=弹出NG模型=popup2＆GT;
        ＆LT;弹出数据-NG-秀=popup2I标记弹出太＆LT; /流行＆GT;
    ＆LT; /弹出＆GT;
＆LT; / DIV＆GT;angular.module（'sembaApp'，[]）
    .directive（'弹出'，函数（）{
    返回{
        范围：{
            ngModel：'='
        }，
        限制：'E'，
        更换：真实，
        transclude：真实，
        模板：'＆LT; D​​IV数据-NG-transclude＆GT;＆LT; A HREF =＃数据-NG-点击=showPopup（）＆gt;显示弹出＆LT; / A＆GT;＆LT; / DIV＆GT;，
        链接：功能postLink（$范围，$元，$ ATTRS）{
            $ scope.showPopup =功能（）{
                的console.log（$ scope.ngModel）;
                $ scope.ngModel = $ scope.ngModel！;
            }
        }
    }
}）
 

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

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