Question

我正在通过获取主要使用JQuery构建的现有站点并尝试“摇摆”它的过程来学习angularjs。我无法在角度中重现相同的功能。

请参阅下面的plunker。 http://plnkr.co/edit/n4cbcRviuzNsieVvr4Im?p=preview

我有一个带有angularjs指令的ul元素，名为“scroller”，如下所示。

        <ul class="dropdown-menu-list scroller" scroller style="height: 250px">
            <li data-ng-repeat="n in notifications">
                <a href="#">
                    <span class="label label-success"><i class="icon-plus"></i></span>
                    {{n.summary}}
                <span class="time">{{n.time}}</span>
                </a>
            </li>
        </ul>

scrolller指令如下所示：

.directive('scroller', function () {
  return {
      priority: 0,
      restrict: 'A',
      scope: {
          done: '&',
          progress: '&'
      },
      link: function (scope, element, attrs) {
          $('.scroller').each(function () {
              var height;
              if ($(this).attr("data-height")) {
                  height = $(this).attr("data-height");
              } else {
                  height = $(this).css('height');
              }
              $(this).slimScroll({
                  size: '7px',
                  color: '#a1b2bd',
                  height: height,
                  disableFadeOut: true
              });
          });


      }
  };

我想要发生的是ng-repeat在控制器中的notifications数组上执行，产生一个超过250px的li元素集合，因此会添加一个slimscrollbar。实际发生的是ng-repeat的结果不包含在最终的DOM中。我相信$（this）.slimScroll（）的父卷轴指令中的调用在之后被称为 ng-repeat执行并替换DOM。如果我删除了scroller属性，则会显示li元素。

我确信这是一个策略，我希望社区可以教会我更好的方法或替代方法。想法？再一次，龙胆在这里。

http://plnkr.co/edit/n4cbcRviuzNsieVvr4Im?p=preview

谢谢，丹

Answer 1

问题实际上是你的指令范围。您使用显式对象作为范围，这意味着您正在隔离范围，这意味着指令范围不再从其父级继承。因此，不再可以从指令范围（因此其元素内部的任何元素）访问来自父控制器的通知。

如果从指令中删除它，它应该有效：

  scope: {
      done: '&',
      progress: '&'
  }

我注意到你还没有使用这些属性，所以它不应该破坏任何其他功能。

查看API文档http://docs.angularjs.org/guide/directive并查找隔离范围以获取更多详细信息。

您尝试做的事情的另一种选择就是这样

scope.$watch(attr.done, function(val) { //do something when the value changes })

由于我不了解您的用例，因此无法说出最佳解决方案。

父指令删除子ng-repeat

1 个答案: