0

私はAngularJSが初めてです。AngularJS を使用して 1 つのディレクティブを作成しましたが、これは正常に動作していますが、この同じディレクティブを別の HTML 要素で使用すると、動作しません。

basecampModule.directive("slideElement", function () {
  function link($scope, element, attributes) {
    var expression = attributes.slideElement;

    if (!$scope.$eval(expression)) {
      element.hide();
    }

    $scope.$watch(expression, function (newValue, oldValue) {
      if (newValue === oldValue) {
        return;
      }

      if (newValue) {
        element.stop(true, true).slideDown("fast");
        $('html, body').animate({
          scrollTop: $(element).offset().top
        }, 1000);
      } else {
        element.stop(true, true).slideUp("fast");
      }
    });
  }

  return ({
    link: link,
    restrict: "A"
  });
});

HTML 部分

<div class="row well" id="detailsBugs" slide-element="FilterBugsDetails.ShowPanel">
       //FIRST ELEMENT
</div>

<div class="row well" id="detailsTasks" slide-element="FilterTaskDetails.ShowPanel">
       //SECOND ELEMENT
</div>

最初の要素では機能しますが、2 番目の要素では機能しません。

その部分が間違っていることを教えてください。??

4

2 に答える 2

1

非常に大げさな推測: you ディレクティブのスコープを分離する必要があります。このディレクティブの両方のインスタンスが同じ $scope を使用しているため、おそらく競合しています:

http://www.egghead.io/video/fYgdU7u2--g

于 2013-07-02T13:27:16.073 に答える
0

最初にこれを見たとき、何が起こっているのかよくわかりませんでした。監視対象は 1 回発火しますが、2 番目のディレクティブでは 2 回目は発火しません。

しかし、ディレクティブが実際には 2 つの異なるプロパティを監視していることが判明しました (これは他の人には明らかだったかもしれませんが、私は完全に見落としていました)。質問からすると、投稿者は同じ要素を監視するようにという指示が必要だったように聞こえました。

とにかく、ここのプランカーでうまく動作します

<button ng-click="FilterBugsDetails.ShowPanel = !FilterBugsDetails.ShowPanel;">Toggle Bugs</button>
<button ng-click="FilterTaskDetails.ShowPanel = !FilterTaskDetails.ShowPanel;">Toggle Tasks</button>
<button ng-click="FilterTaskDetails.ShowPanel = !FilterTaskDetails.ShowPanel; FilterBugsDetails.ShowPanel = !FilterBugsDetails.ShowPanel;">Toggle Tasks And Bugs</button>
于 2013-07-02T14:22:43.780 に答える