Question

我正在尝试从已翻译的内容中访问指令中的方法。我的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");
        }
      }
    }
  })

这里的问题是我无法从transcluded内容（list-element）的ng-click事件中访问link function（）中的select（）函数。

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

以下是当前代码的Plunker：Plunker

Answer 1

我认为你做不到。来自Angular docs：

（...）翻译的优点是链接功能接收a 预先绑定到正确范围的翻译功能。在一个典型设置窗口小部件创建隔离范围，但是 transclusion不是一个孩子，而是一个孤立范围的兄弟。这个使得窗口小部件可以具有私有状态，以及转换为绑定到父（预隔离）范围。

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

Answer 2

您可以使用$$nextSibling：

link: function($scope) {

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

},

从被抄除的内容中调用指令方法

2 个答案: