如何在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可用于确定何时创建最后的<li>.查看这个小提琴(我没有写),可以附加到<li>元素的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

另请参见/sf/answers/973483521/

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