2

こんにちは、同じページに 2 つのポップアップ ディレクティブがあります。問題は、どちらかをクリックすると両方がポップアップすることです。

クリックされたポップアップのみがポップアップするように、各スコープを互いに分離するにはどうすればよいですか?

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

3 に答える 3

1

scope : true各ディレクティブが異なるスコープであることを確認するために、ディレクティブ関数によって返されるオブジェクトにa を追加できます。

ドキュメント(「ディレクティブの記述 (長いバージョン)」)を必ず確認してください。スコープ属性の機能、スコープの分離方法、引数のバインド方法などが説明されています。

このスタックオーバーフローの質問は、さらに良い説明を提供します。

于 2013-07-31T14:28:44.707 に答える
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

于 2013-07-31T17:47:26.033 に答える
0

$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;
    }
  }
于 2013-07-31T17:40:33.357 に答える