试图使指令包装UI引导提前输入工作

Trying to make directive wrapping UI Bootstraps typeahead to work

本文关键字：输入 工作 UI 指令 包装      更新时间：2023-09-26

我在一个指令中包装UI引导，并且在模板中访问$viewValue有困难。我希望能够调用在模板中指定的typeahead属性中指定的getAutocompleteList函数与当前的$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>

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

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

  • 我使用$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});     };
    }  
  }
});

我调整了模板，因为我不再有一个孤立的作用域。这里我调用改变上下文的new方法。当调用这个方法时，我发送一个参数$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>

这是我的作品

相关文章：