2

我正在尝试从转换的内容访问指令中的方法。我的 HTML 看起来像：

<typeahead class="typeahead" model="customers" filtered-model="customersfiltered" ng-model="selectedcustomer">
  <ul>
    <li ng-click="select(customer)" ng-repeat="customer in customersfiltered | filter:filter | limitTo:10">
      {{customer.firstname}} {{customer.lastname}}
    </li>
  </ul>
</typeahead>

还有我的 AngularJS 指令：

directive('typeahead', function ($filter) {
    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      scope: {
        model: '=',
        filteredModel: '='
      },
      template: '<div class="typeahead"><form><input type="text" autocomplete="off" class="col-lg-12" ng-model="filter"></form><div ng-transclude></div></div>', //
      controller: function($scope){
        $scope.filterArray = function(filterString){
          $scope.filteredModel=  $filter('filter')($scope.model, filterString);
        }

        $scope.clear = function(){
          $scope.filteredModel = [];
        }

        $scope.$watch('filter', function(){
          if($scope.filter) {
            $scope.filterArray($scope.filter);
          } else {
            $scope.clear();
          }
        });
      },
      link: function ($scope, $element, $attributes) {
        $scope.select = function(customer){
          console.log("dwadad");
        }
      }
    }
  })

这里的问题是我无法从嵌入内容（列表元素）的 ng-click 事件访问链接函数（）中的 select（）函数。

有人知道如何解决这个问题吗？

这是当前代码的 Plunker：Plunker

4

2 回答 2

0

我认为你不能那样做。来自Angular 文档：

(...) 嵌入的优点是链接函数接收到预先绑定到正确范围的嵌入函数。在典型的设置中，小部件创建了一个隔离范围，但嵌入不是子范围，而是隔离范围的兄弟。这使得小部件可以拥有私有状态，并且嵌入可以绑定到父（预隔离）范围。

换句话说，被嵌入的 DOM 的范围是指令范围的兄弟，而不是孩子。所以你不能从那里访问它，我认为这是正确的。否则，您将无法将嵌入的内容绑定到正确的范围。

于 2013-09-02T20:15:27.593 回答
0

您可以使用$$nextSibling：

link: function($scope) {

    $scope.$$nextSibling.select = function(customer) {
        alert('used isolated scope using $$nextSibling');
    }

},
于 2015-10-09T11:31:51.080 回答