2014-09-03 2 views
3

Я пытаюсь внедрить ngModel в угловой директиве, и я получаю эту ошибку:Неизвестный поставщик: ngModelProvider

Error: [$injector:unpr] Unknown provider: ngModelProvider <- ngModel 
http://errors.angularjs.org/1.2.18/$injector/unpr?p0=ngModelProvider%20%3C-%20ngModel 
    at http://localhost:2013/Scripts/angular.js:78:12 
    at http://localhost:2013/Scripts/angular.js:3741:19 
    at Object.getService [as get] (http://localhost:2013/Scripts/angular.js:3869:39) 
    at http://localhost:2013/Scripts/angular.js:3746:45 
    at getService (http://localhost:2013/Scripts/angular.js:3869:39) 
    at invoke (http://localhost:2013/Scripts/angular.js:3896:13) 
    at Object.instantiate (http://localhost:2013/Scripts/angular.js:3917:23) 
    at $get (http://localhost:2013/Scripts/angular.js:7201:28) 
    at http://localhost:2013/Scripts/angular.js:6592:34 
    at forEach (http://localhost:2013/Scripts/angular.js:327:20) angular.js:9937 
(anonymous function) angular.js:9937 
$get angular.js:7283 
$get.Scope.$digest angular.js:12414 
$get.Scope.$apply angular.js:12660 
done angular.js:8272 
completeRequest angular.js:8477 
xhr.onreadystatechange 

Вот моя директива:

module.directive("myDatePicker", function() { 
    return { 
     restrict: "A", 
     template: '<p class="input-group" title="{{title}}">' + 
          '<input type="text" class="form-control" data-datepicker-popup="{{dateFormat}}" ng-model="selectedDate" data-is-open="isOpen" data-datepicker-options="dateOptions" ng-required="true" data-close-text="{{closeText}}" />' + 
          '<span class="input-group-btn">' + 
           '<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>' + 
          '</span>' + 
         '</p>', 
     replace: true, 
     require: '?ngModel', 
     //priority: 0, 
     scope: { 
      title: "@", 
      selectedDate: "=ngModel", 
      onChange: "&", 
      dateFormat: "=" 
     }, 
     compile: function (tElement, tAttrs, transclude) { 
      // Correct ngModel for isolate scope 
      if (tAttrs.ngModel) { 
       tAttrs.$set('selectedDate', tAttrs.ngModel, false); 
       tAttrs.$set('ngModel', 'selectedDate', false); 
      } 

      return { 
       post: function (scope, iElement, iAttrs, controller) { 
        // Render 
        return controller.$render = function() { 
         if (!controller.$viewValue) { 
          return; 
         } 
         angular.extend(scope, controller.$viewValue); 
        }; 
       } 
      }; 
     }, 
     priority: 100, 
     link: function (scope, elem, attr) { 
     }, 
     controller: function ($scope, global, ngModel) { 
      $scope.isOpen = false; 
      $scope.closeText = 'Close'; 
      $scope.dateOptions = {}; 

      $scope.open = function ($event) { 
       $event.preventDefault(); 
       $event.stopPropagation(); 
       $scope.isOpen = true; 
      }; 

      $scope.$watch(function() { 
       return $scope.selectedDate; 
      }, 
       function (newValue, oldValue) { 
        ngModel.$setValidity('required', newValue == true); 
        $scope.onChange({ newDate: newValue, oldDate: oldValue }); 
       }, true); 
     } 
    }; 
}); 

А вот мой HTML:

    <input data-my-date-picker 
          id="EventDatePicker" data-name="EventDatePicker" 
          data-date-format="dateFormat" 
          ng-model="EventDetails.Date" 
          ng-required="true" 
          data-title="Date" /> 

Почему он не может быть разрешен? Я попытался сделать это:

module.directive("myDatePicker", ['ngModel', function() { 

... но это не помогло.

Я также попытался удалить priority, и это тоже не помогло.

Это что-то связано с порядком загрузки директив?

Что мне здесь не хватает?

Любые идеи?


Наконец я сделал это, по предложению små в:

 require: ['^ngModel'/*, '^isDate'*/], 
     scope: { 
      title: "@?", 
      name: "@?" 
     }, 
     link: function (scope, elem, attr, ngModel/*, isDate*/) { 
     ... 

Этот вид, кажется, работает.

Я не уверен, почему я не могу ввести это в контроллер. :(

Там должен быть путь, но я не нашел еще ...

Но по какой-то странной причине, директивы, как isDate выше еще не вводили (хотя они определены до тока . директива)

Это сбивает с толку

+2

одно наблюдение: оно должно быть '' require' не requires' за требование директивы. – scarlz

+0

@scarlz Я исправил это. Но ничего не меняется. – user2173353

+0

- это EventDetails.Date на самом деле установлен? –

ответ

5

Ваши аргументы неверны в функции контроллера функция контроллер принимает:..

controller : function ($scope, $element) { 
    ...  
} 

Если вы пытаетесь придать ngModel как зависимость, использовать функции связи вместо:

link : function(scope, element, attrs, ngModelController) { 
    ... 
} 
+0

Да, это похоже на работу. Интересно, как вы можете сделать то же самое в контроллере. Но я думаю, что вы ошибаетесь в отношении контроллера. Для контроллера аргументы автоматически вводятся Angular, и у них нет определенного порядка (я не знаю, как это делает Angular, но это происходит!). Функция связи отличается (имеет порядок). Благодаря! :) – user2173353

+0

Контроллер принимает любые требуемые зависимости экземпляра. Он ничем не отличается от обычного контроллера, за исключением того, что вы можете вводить [некоторые дополнительные вещи] (https://docs.angularjs.org/api/ng/service/$compile#-controller-), нормальный контроллер не может зависеть на, как $ attr, $ element и $ transclude. –

Смежные вопросы