Question

我正在使用Typeahead directive from the UI Bootstrap framework。我在另一个指令中使用此指令。我的外部指令定义如下：

.directive('myDirective', function () {
  return {
    restrict:'E',
    transclude: true,
    scope: {
      showLinks: '=?',
      query: '='
    },
    templateUrl: '/directives/my-directive.html',
    controller: function ($scope) {
      if (angular.isUndefined($scope.showLinks)) {
        $scope.showLinks = true;
        console.log('show links? ' + $scope.showLinks);
      }
    }
  };
});

my-directive.html如下所示：

<div style="width:100%;">
    <span>{{showLinks}}</span> <!-- renders just fine -->
    <input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
           typeahead="option as option.Name for option in getLocation($viewValue)"
           typeahead-min-length="3" typeahead-template-url="location.html" />
    <script type="text/ng-template" id="location.html">
      {{showLinks}} <!-- Never renders -->
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
    </script>
</div>

我这样称呼我的指令：

<my-directive show-links="true" />

我需要在模板中使用showLinks的值，用于预先输入。但是出于某种原因，它并没有传递到模板中。我相信这与范围有关。我通过将值绑定到UI来得出这个结论，如上所示。 showLinks的值在我的模板中显示得很好。但是，它不会出现在我的指令中的typeahead实例的模板中。

我做错了什么？我觉得我很亲密。然而，我一整天都在努力。

感谢您提供任何帮助！

Answer 1

typehead指令正在创建自己的隔离范围，因此您无法访问任何不属于此范围的属性。基本上您只能访问这些属性：

scope:{
    index:'=',
    match:'=',
    query:'='
}

但您可以访问mach match.model的model属性，因此在您的示例中，您可以将showLinks变量作为参数添加到getLocation方法并将其值映射到option对象：

<input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
           typeahead="option as option.Name for option in getLocation($viewValue, showLinks)"
           typeahead-min-length="3" typeahead-template-url="location.html" />

模板

 <script type="text/ng-template" id="location.html">
      {{match.model.showLinks}} <!-- the show linLinks property is mapped inside getLocation method -->
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
    </script>

getLocation示例：

$scope.getLocation = function(viewValue, showLinks)
{
   var locations = [];
   // code to fill locations

   // extend each location (option) object with showLinks data
   for (int i=0; i<locations.length; i++)
   {
        var location = locations[i];
        location.showLinks = showLinks;
   }   

   return locations;

}

获取子指令中的范围值

1 个答案: