angularjs - 显示所有应用的智能表过滤器

Question

我想在一个 div 中显示所有应用的智能表过滤器。我的想法是编写一个监视 ctrl.tableState().search.predicateObject 属性的指令：

directivesModule.directive('filterBar', function() {
return {
    restrict:'E',
    require:'^stTable',
    template: '<div class="row"><div class="col-xs-12 filters"><span class="filters-header">Filters: </span><span class="tag label label-default" ng-repeat="filter in filters"><span>{{filter.name}}</span><a><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a> </span> </div> </div>',
    scope: true,
    link:function(scope, element, attr, ctrl){
        scope.$watchCollection(ctrl.tableState().search.predicateObject, function(newVal, oldVal) {
            console.log(newVal, oldVal);
        });
    }
};
});

然而，console.log 只被调用一次，显示未定义两次。

我使用以下代码添加过滤器：

directivesModule.directive('addFilter', function() {
    return {
        restrict:'A',
        require:'^stTable',
        scope: {
            criterion: '@',
            value: '@'
        },
        link:function(scope, element, attr, ctrl){

            element.bind('click', function() {
                scope.$apply(function() {
                    ctrl.search(scope.value, scope.criterion);
                    console.log(ctrl.tableState().search.predicateObject);
                });
            });
        }
    };
});

Answer 1

作为解决方案，我选择了 ngTable。这让它变得容易多了。我现在使用这段代码：

"use strict";
var directivesModule = angular.module("directives");

directivesModule.directive('addFilter', function() {
return {
    restrict:'A',
    scope: {
        criterion: '@',
        value: '@',
        filter: '='
    },
    link:function(scope, element){

        element.bind('click', function() {
            scope.$apply(function() {
                scope.filter[scope.criterion] = scope.value;
            });
        });
    }
};
});

Answer 2

我不确定你为什么在这里看一个集合

为什么不做类似的事情：

DirectivesModule.directive('filterBar', function() {
  return {
    restrict:'E',
    require:'^stTable',
    template: 'you template',
    scope: true,
    link:function(scope, element, attr, ctrl){
      scope.$watch(function () {
          return ctrl.tableState().search;
      }, function (newValue, oldValue) {
         if(newValue.predicateObject){
           console.log(newValue.predicateObject)
         }
      }, true);
    }
   };
});