javascript - 如何在 AngularJS 中正确使用指令

Question

我正在使用 AngularJS 上的指令执行我的第一步，但该指令对我不起作用。

我有一个 ng-repeat列表

<ul ng-after-list-filter>
    <li ng-repeat="item in items | filter:activeFilter.filterType = activeFilter.filterValue">...</li>
</ul>

正在使用 $scope.activeFilter.filterValue 过滤

我正在尝试创建 ng-after-list-filter指令，因此它将在列表被过滤后执行，这样我就可以对该新的 ul 进行 dom 操作。元素。

这是我的指令，它不起作用:

myModule.directive('ngAfterListFilter',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            scope.$watch(scope.activeFilter.filterValue, function(val) {
                console.log('do something here');
            });
        }
    }
});

1. 我如何让它工作？我假设 scope.activeFilter.filterValue 没有被更新，但是 - 它在范围内，它确实得到更新并且列表得到过滤。我正在尝试观察这个变量，为什么它不起作用？

2. 是否有更好的方法来创建此指令？我的意思是 - 我想在列表更新时运行 DOM 更改(调整事物的大小)。那么有没有办法听$('ul').html() ？我试过了，但它输出了一个错误，我将原始文本放入 javascript

Answer 1

$last 可用于确定何时创建最后一个

。参见 this fiddle (我没有写它)用于实现可以附加到

元素的 checkLast 指令:

directive('checkLast', function () {
  return function (scope, element, attrs) {
     if (scope.$last === true) {
        element.ready(function () {
           // manipulate ul here, or if that doesn't work
           // try with $timeout:
           // $timeout(function() { 
           //    do manip here
           //}, 0, false);  // remove false if you need $apply to run

另见 https://stackoverflow.com/a/13906907/215945

我不确定 element.ready() 是否必要，或者它是否适用于动态生成的元素。