angularjs - 如何使用表达式将数组传递给指令而不会导致无限摘要

Question

我目前正致力于为其他开发人员创建可重用的 UI 组件。

这是我的目标。

自定义指令my-directive

它接受一个返回数组的表达式 item-source="items | filter: someFilter track by $index"

Angular/Javascript

angular.module('myApp',['ngMaterial'])
.controller('myCtrl',[ '$scope', function($scope){
  $scope.items = [ 'apple', 'banana', 'coconut', 'danish'];
}])
.directive('myDirective',[function(){
  return{
    restrict: 'E',
    template: '<md-list>'
      +'<md-list-item ng-repeat="item in itemSource">'
      +'<span>{{item}}</span>'
      +'</md-list-item>'
      +'</md-list>',
    scope:{
      itemSource: '='
    },
    link: function(scope, elem, attrs){}
  };
}])

和 HTML

<div ng-app="myApp" ng-controller="myCtrl" layout"column" layout-fill flex>
  <md-content flex layout="row" layout-padding>
    <div layout="column">      
      <md-input-container>
        <label>Using Directive</label>
        <input ng-model="someFilter"/>
      </md-input-container>
      <my-directive item-source="items | filter: someFilter track by $index">
      </my-directive>   
    </div>      
  </md-content>
</div>

密码本 http://codepen.io/jayray/pen/NGEKpM

我知道模型不稳定会导致无限摘要。

但我相信对于开发人员来说，这会有所帮助，因为他们能够使用自定义指令和 ng-repeat 中使用的相同类型的表达式。

而且我知道我可以做全部

<my-directive>
  <my-item ng-repeat="item in items | filter: someFilter track by $index"></my-item>
</my-directive>

但我的问题是我正在创建一个指令，该指令生成多个 ng-repeats 以及何时显示的阈值。

例如，my-directive 模板可能如下所示。

<md-list ng-if="itemSource.length < 10">
  <md-list-item ng-repeat="item in itemSource" ng-if="$index < 5 || isShowingMore" ng-click="toggleSelected(item)">
    {{item}}
  </md-list-item>
  <md-list-item ng-click="isShowingMore = !isShowingMore>
    <span ng-if="!isShowingMore">More</span>
    <span ng-if="isShowingMore">Less</span>
  </md-list-item>
</md-list>

<div ng-if="itemSource.length >= 10>
  <md-list>
    <md-list-item ng-repeat="item in itemSource | showSelected" ng-click="toggleSelected(item)">{{item}} Selected!</md-list-item>
  </md-list>
  <md-input-container>
    <label>Filter Items</label>
    <input ng-model="filterText"/>
  </md-input-container>
  <md-list>
    <md-list-item ng-repeat="item in itemSource | hideSelected | filter: filterText" ng-click="toggleSelected(item)">{{item}}</md-list-item>
  </md-list>
</div>

在这种情况下，前面的示例实际上不起作用。我只是好奇它是否可能，4 天的互联网搜索加上未能提出我自己的解决方案让我来到这里。

Answer 1

经过一些研究，我发现表达式上的 watchCollection 实际上返回了它的求值。感谢您的提问，我学到了一些新东西。

假设我有一个带有 id 的对象数组$scope.test = [{ id:1 },{ id:2 },{ id:11 }];
我只想得到那些以 one 开头的。

所以我会调用我的新指令:

<div my-dir="item in test | filter:{id:1}"></div>

指令应该是这样的:

app.directive('myDir', function(){
  return {
    compile: function($element, $attr){

      // gets the expression from the attribute
      var expression = $attr.myDir;

      // fetch the filters expression from the full string
      var match = expression.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);

      // set rhs to be 'filter:{ id: 1 }'
      var rhs = match[2];

      return function linker($scope){
        $scope.$watchCollection(rhs, function(collection){
          //  at this point the collection is already filtered by angualar mechanism I guess :)
          $scope.list = collection;
          console.log(collection);
        });
      };
    },
    template: '<div ng-repeat="item in list">{{item.id}}</div>'
  }
});

控制台的输出将是您过滤后的表达式。1, 11

完整代码的现场演示 here