Question

我在指令中包含UI Bootstraps typeahead并且无法访问模板中的$viewValue。我希望能够使用当前getAutocompleteList调用模板中typeahead-attribute中指定的$viewValue函数。目前，该值始终未定义。

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

我还制作了Plunker

App.js

var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope,list) {
  $scope.modell = {};
  $scope.modell.grupp = {label: "Your State", placeholder:'Write state name', namn: "aaa"};
  $scope.modell.getAutocompleteList = function(namn) {return list.getList(namn); };
});

app.directive('myautocomplete', function() {
  return {
    scope: {
      modell: "=",
      getAutocompleteList: "&"
    },
    templateUrl: 'skriv.html',
  }
});

app.factory('list', function($q){
  return {
    getList: function(search) {
      console.log(search);
      states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
      var result = states;
      if(search) {
        result = [];
        for (var i = 0; i < states.length; i++) {
          if(states[i].toLowerCase().indexOf(search) === 0){
            result.push(states[i]);
          }
        }
      }
      else {result = states}
      var deferred = $q.defer();
      deferred.resolve(result);
      return deferred.promise;
    }
  }
});

Html文件

<body ng-controller="MainCtrl">
  <div myautocomplete modell="modell.grupp" get-autocomplete-list="modell.getAutocompleteList($viewValue)"></div>
</body>

模板 - skriv.html

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

Answer 1

几个小时后我终于开始工作了。这就是我所做的。

我使用$ 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发送参数。这是发送到我的getAutocompleteList方法的值。

    <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>

这是我的工作Plunker

试图使指令包装UI Bootstrap typeahead工作

1 个答案: