我正在尝试使用AngularJS执行自动完成文本框,我在角度模块中添加了ngAutocomplete
,但无法加载指令
Angular Code:
"use strict";
var app = angular.module('npi', ['ngRoute', 'ngSanitize', 'ngFileUpload', 'ngAutocomplete','ui.bootstrap']);
app.config(['$compileProvider', '$routeProvider',function($compileProvider, $routeProvider) {
$compileProvider.commentDirectivesEnabled(false);
//$compileProvider.cssClassDirectivesEnabled(false);
//$compileProvider.debugInfoEnabled(false);
$routeProvider
when("/part/:part_id", {
templateUrl : "/html/part_detail.html",
controller : "partDetail"
})
}]);
part_details.js
"use strict";
app.controller("partDetail", [
'$scope',
'$http',
'$log',
'$window',
'$routeParams',
function($scope, $http, $log, $window, $routeParams) {
$scope.$parent.title = "Part Detail";
$scope.$parent.selectpartAttribute = "";
$scope.sample = ['one','two','three','four','five','six'];
} ]);
part_detail.html
<input auto-complete ui-items="sample" ng-model="selectpartAttribute.attribute_group" />
<input type="text" ng-model="selectpartAttribute.attribute_name" />
<input type="text" ng-model="selectpartAttribute.attribute_value" />
auto_complete.js
"use strict";
app.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
点击input
时,指令不会加载
答案 0 :(得分:1)
<强>问题强>
您收到Error: $injector:strictdi
错误的原因是您指定了严格模式而没有$timeout
服务的显式注释。
这里解释了:Error: $injector:strictdi Explicit annotation required
<强>解决方案强>
要解决此问题,您需要在将$timeout
服务注入指令时提供显式注释,如下所示:
app.directive("autoComplete", ["$timeout", function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger("input");
}, 0);
}
});
};
}]);
或者像这样:
app.directive("autoComplete", thisDirective);
thisDirective.$inject = ["$timeout"];
function thisDirective($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger("input");
}, 0);
}
});
};
}