0

我正在通过获取主要使用 JQuery 构建的现有站点并尝试对其进行“角度化”的过程来学习 angularjs。我无法以角度重现相同的功能。

请参阅以下插件。 http://plnkr.co/edit/n4cbcRviuzNsieVvr4Im?p=preview

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

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

scroller 指令如下所示：

.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 在控制器中的通知数组上执行，产生超过 250px 的 li 元素的集合，因此将添加一个 slimscrollbar。实际发生的是 ng-repeat 的结果不包含在最终的 DOM 中。我相信在ng-repeat 执行并替换 DOM之后调用 $(this).slimScroll() 的父滚动指令中的调用。如果我删除 scroller 属性，则会显示 li 元素。

我确信有一个策略可以解决这个问题，并希望社区可以教育我更好的方法或替代方法。想法？笨蛋又来了。

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

谢谢，丹

4

1 回答 1

2

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

如果您从指令中删除它，它应该可以工作：

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

我注意到您无论如何都没有使用这些属性，因此它不应该破坏任何其他功能。

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

您尝试做的事情的替代方法就是这样

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

由于我不知道您的用例，我不能说最好的解决方案是什么。

于 2013-10-18T20:24:48.723 回答