Javascript 尝试使指令包装UI引导类型提前工作

我在指令中包装UI引导typeahead，在模板中访问$viewValue时遇到问题。 我希望能够使用当前$viewValue调用模板中typeahead属性中指定的getAutocompleteList函数。当前该值始终未定义

在我的实际应用程序中，getAutocompleteList对服务器进行ajax调用，服务器上有数百万条记录可供选择。这个例子只是为了说明这个问题

我也做了一个

App.js

Html文件

模板-skriv.html

---

几个小时后，我终于把它修好了。这就是我所做的

我使用$parse服务通过更改上下文来控制发送到getAutocompleteList方法的内容。 它不适用于隔离作用域，所以我改为共享作用域。 我添加了一个方法，在该方法中调用解析后的表达式并更改上下文

app.directive('myautocomplete', function() {
  return {
    replace: true,
    templateUrl: 'skriv.html',
    link: function(scope, element, attrs, ctrl) {
      var hamtaLista = $parse(attrs.getAutocompleteList);
      scope.hamta = function(varde) { return hamtaLista(scope,{viewValue: varde});     };
    }  
  }
});

我调整了模板，因为我不再有单独的作用域。在这里，我调用更改上下文的新方法。调用此方法时，我会发送一个带有$viewValue的参数。这是发送到我的GetAutoCompletList方法的值

    <div>
      <span>{{modell.grupp.label}}</span>
      <input id="inputautocomplete" type="text" ng-model="modell.grupp.state" placeholder="{{modell.grupp.placeholder}}" typeahead="state for state in hamta($viewValue)" class="form-control">
    </div>

最后，我还更改了html中指令的声明。只是为了澄清viewValue和$viewValue之间的区别

<div myautocomplete modell="modell.grupp" get-autocomplete-list="modell.getAutocompleteList(viewValue)"></div>

这是我的工作

app.directive('myautocomplete', function() {
  return {
    replace: true,
    templateUrl: 'skriv.html',
    link: function(scope, element, attrs, ctrl) {
      var hamtaLista = $parse(attrs.getAutocompleteList);
      scope.hamta = function(varde) { return hamtaLista(scope,{viewValue: varde});     };
    }  
  }
});

    <div>
      <span>{{modell.grupp.label}}</span>
      <input id="inputautocomplete" type="text" ng-model="modell.grupp.state" placeholder="{{modell.grupp.placeholder}}" typeahead="state for state in hamta($viewValue)" class="form-control">
    </div>

<div myautocomplete modell="modell.grupp" get-autocomplete-list="modell.getAutocompleteList(viewValue)"></div>