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');
            });
        }
    }
});

如何使其工作？我认为scope.activeFilter.filterValue没有被更新，但是 - 它在范围内，并且它确实得到了更新并且列表获得了过滤。而我正试图观察这个变量，为什么它不起作用呢？
有没有更好的方法来创建此指令？我的意思是 - 我想在列表更新时运行DOM更改（调整事物的大小）。有没有办法听$('ul').html()？我试过了，但它输出了一个错误，我把原始文本放在javascript

Answer 1

$ last可用于确定最后一次＆lt; li＆gt;正在创建。有关可以附加到＆lt; li＆gt;的checkLast指令的实现，请参阅this fiddle（我没有写）。元素：

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（）是否必要，或者它是否适用于动态生成的元素。

Answer 2

您似乎想重复使用过滤器中的过滤值？正确的吗？

如果是这种情况，你真正需要做的就是：

<!-- initial filter -->
<ul ng-after-list-filter>
    <li ng-repeat="item in filteredData =  (items | filter:activeFilter.filterType)">{{item}}</li>
</ul>

<!-- reuse what you filtered -->
<div ng-repeat="item in filteredData">{{item}}</div>

我希望我能相信这一点，但这是我在StackOverflow上另一个我现在找不到的问题中看到的技巧。

然后要知道何时更新，您需要观看范围内的filteredData：

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

如何在AngularJS中正确使用指令

2 个答案: