Question

我正在使用typeahead来获取输入文本的一些建议，这是由Angular控制器在div 控制中。

建议任务的代码适用于jQuery插件，因此当我选择时，我正在尝试将值分配给$ scope，但这绝不会发生。

我已尝试使用var scope = angular.element($("#providersSearchInput").scope() and then assign it as suggested here获取元素的范围，但它不起作用。

这就是我正在尝试的：

<div class="modal-body" ng-controller="ProvidersController" ng-init="orderReviewTab = 'observations'">

    <input type="text" id="providersSearchInput" data-provide="typeahead" class="form-control input-md" placeholder="Buscar proovedores">
    {{currentProvider}}
</div>

控制器如下所示：

tv3App.controller('ProvidersController', function($scope, $rootScope, $http, $timeout) {


  var resultsCache = [];

  $("#providersSearchInput").typeahead({
    source:     function (query, process) {
                  return $.get("/search/providers/?query=" + query, function (results) {
                    resultsCache = results;
                    return process(results);
                  },'json');
                },
    matcher:    function (item) {
                  var name = item.name.toLowerCase();
                  var email = item.email.toLowerCase();
                  var contact_name = item.contact_name.toLowerCase();
                  //console.log(name);
                  var q = this.query.toLowerCase();
                  return (name.indexOf(q) != -1 || email.indexOf(q) != -1 || contact_name.indexOf(q) != -1);
                },
    scrollHeight: 20,
    highlighter: function (itemName) {
      var selected = _.find(resultsCache,{name:itemName});
      var div = $('<div></div>');
      var name = $('<span ></span>').html('<strong style="font-weight:bold">Empresa: </strong> ' + selected.name);
      var contact = $('<span ></span>').html('  <strong style="font-weight:bold">Contacto: </strong> ' + selected.contact_name);
      var email = $('<span ></span>').html('  <strong style="font-weight:bold">e-mail:</strong> ' + selected.email);

      return $(div).append(name).append(contact).append(email).html();
    },
    minLength:  3,
    items:      15,
    afterSelect: function (item) {
      console.log(item);
      $scope.$emit('providerSelected',item);
    }
  });

  $scope.$on('providerSelected', function (event,provider) {
    console.log(provider);
    $scope.currentProvider = provider;
    $scope.$apply();
  });

});

修改

我试过这个来检查任何变化：

  $scope.$watch('currentProvider',function (newValue,oldValue) {
    console.log(oldValue);
    console.log(newValue);
  });

因此，在选择实际触发的内容时，$ scope.currentProvider似乎已更新，但它永远不会在视图中呈现...

Answer 1

获取https://angular-ui.github.io/bootstrap/

一旦你这样做，在你的代码中确保

angular.module('myModule', ['ui.bootstrap']);

和typeahead有

<input type="text" ng-model="currentProvider" typeahead="provider for provider in getProviders($viewValue) | limitTo:8" class="form-control">

在你的控制器中确保你有

$scope.getProviders = function(val){
    return $http.get('/search/providers/?query=' + val).then(function(response){
        return response.data;
    })
}

虽然我没有测试

，但这应该可以解决问题

为什么我不能在jQuery范围内进行$ scope更新？

修改

1 个答案: