我正在使用 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 中呈现......
最佳答案
获取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;
})
}
虽然我还没有测试过,但这应该可以解决问题
关于javascript - 为什么我不能在 jQuery 范围内进行 $scope 更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29597136/