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

Question

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

建议任务的代码与 jQuery 插件一起使用，所以当我选择时，我试图为 $scope 分配一个值，但这永远不会发生。

我已经尝试使用 varscope = 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>

Controller 看起来像这样:

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 似乎已更新，但它永远不会在 View 中呈现......

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

在你的 Controller 中确保你有

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

虽然我还没有测试过，但这应该可以解决问题