0

我是 AngularJS 的新手。我已经使用 AngularJS 创建了一个对我来说工作正常的指令，但是当我将这个指令与另一个 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>

它与第一个元素一起使用，但不适用于第二个元素。

请让我知道那部分出了什么问题。??

4

2 回答 2

1

一个非常疯狂的猜测：您应该隔离指令的范围。由于该指令的两个实例都使用相同的 $scope 他们可能是冲突的：

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

于 2013-07-02T13:27:16.073 回答
0

当我第一次看到这个时，我无法完全弄清楚发生了什么。对于第二个指令，被监视的对象会触发一次，但不会触发第二次。

然而，事实证明该指令实际上是在观察两个不同的属性（也许这对其他人来说很明显，但我完全错过了它）。从这个问题听起来，发帖人希望指令观看相同的元素。

无论如何，它在我的 plunker中运行良好

<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 回答