javascript - 是否可以将值/ng-模型从一个指令模板发送到另一个指令模板？ (AngularJS)

Question

让我们考虑一个最简单的例子。

如何发送来自指令 A 模板的文本输入值，作为指令 B 模板中作为 ng-repeat 存在的列表的过滤器？

Answer 1

第一种方法 - 依赖于托管 Controller 的范围 http://plnkr.co/edit/WuEN9hgfSoiIpR8ufocW?p=preview

html

<first-directive></first-directive>
<second-directive></second-directive>

js

app.controller('myCtrl',function($scope, $location, $timeout) {

    $scope.items=['a ab', 'asd', 'www', '123'];
  }
);

app.directive('firstDirective', function() {
   return {
      restrict: 'EA',
      scope: false,
      template: '<div><input ng-model="input"></div>'
    };
});


app.directive('secondDirective', function() {
   return {
      restrict: 'EA',
      scope: false,
      template: '<div ng-repeat="item in items | filter:input">{{ item }}</div>'
    };
});

第二种方法 - 指令参数 http://plnkr.co/edit/zEJWgQfLgVzl2RpO3qhp?p=preview

html

<first-directive filter-string="filterString"></first-directive>
<second-directive filter-string="filterString" items="items"></second-directive>

js

app.controller('myCtrl',function($scope, $location, $timeout) {
    $scope.items=['a ab', 'asd', 'www', '123'];
    $scope.filterString = '';
  }
);

app.directive('firstDirective', function() {
   return {
      restrict: 'EA',
      scope: { filterString:"=" },
      template: '<div><input ng-model="filterString"></div>'
    };
});


app.directive('secondDirective', function() {
   return {
      restrict: 'EA',
      scope: { filterString:"=",
      items:"="},
      template: '<div ng-repeat="item in items | filter:filterString">{{ item }}</div>'
    };
});