当为ngAutocomplete加载指令时,AngularJS:[$ injector:strictdi]错误

时间:2017-09-14 19:47:36

标签: javascript angularjs autocomplete

我正在尝试使用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时,指令不会加载

错误 enter image description here 提前致谢

1 个答案:

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