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

Question

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

建议任务的代码适用于jQuery插件，因此当我选择时，我试图为$scope分配一个值，但是这永远不会发生。

我已经尝试使用 var scope = angular.element($("#providersSearchInput").scope() 获取元素的范围，然后按照此处的建议分配它，但它不起作用。

这就是我正在尝试的：

<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']);

对于提前输入有

<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;
    })
}

这应该可以解决问题，尽管我还没有测试