2015-04-01 2 views
2

Мы создаем директиву для увеличения и уменьшения числа в текстовом поле, когда пользователь нажимает на кнопки.Директива никогда не называется angularjs

Вот код моей пользовательской директивы.

var CEDirectives = angular.module('App.customnumberdirectives', []) 
.directive('ngcustomNumber', ['$compile', function ($compile) { 
var TEMPLATE_URL = '/customnumber/index.html'; 
var tem = '<div class="wrapper">' + 
      ' <input type="text" data-ng-model="{{model}}" data-ng-blur="onBlurHandler()">' + 
      ' <button ng-click="Increase()" style="cursor:pointer; background-color: transparent">INC</button>' + 
      ' <button ng-click="Decrease()" style="cursor:pointer; background-color: transparent">DEC</button>' + 
      '</div>'; 

// Set the default template for this directive 
$templateCache.put(TEMPLATE_URL,tem); 

return { 
    restrict: "E", 
    scope: { 
     model: '@', 
     onblurevent: '&' 
    }, 
    replace: true, 
    templateUrl: function (element, attrs) { 
     return attrs.templateUrl || TEMPLATE_URL; 
    }, 
    link: function (scope, element, attributes) { 

     scope.onBlurHandler = function() { 
      if (scope.onblurevent) { 
       scope.onblurevent(); 
      } 
     }; 

     scope.Increase = function() { 
      alert('Inc'); 
     }; 
     scope.Decrease = function() { 
      alert('Dec'); 
     }; 
    } 
}; 
} ]); 

В представлении HTML: -

<ngcustomNumber model="weight" onblurevent="Save"></ngcustomNumber> 

(1) Нет ошибки в консоли.

(2) Пробовал поставить предупреждение в верхней части директивы. Не появляется предупреждающее сообщение.

Заранее благодарен!

+0

ВГА вы применили ngApp в вашем HTML –

+1

Да. Его в теге HTML. –

+0

App.customnumberdirectives - это имя вашего модуля, чтобы подтвердить это? –

ответ

0

Попробуйте это:

<ngcustom-number model="weight" onblurevent="Save"></ngcustom-number> 
+0

ngcustomNumber и ngcustom-number работают одинаково –

+0

Работал. Но могу ли я знать, является ли обязательным писать директиву аналогичным образом? –

+0

Вы установили 'ограничение: 'E'', что означает, что разрешен только элемент. используйте 'AE' в противном случае, если вы хотите использовать как атрибут – Chandermani

0

Поскольку процесс компиляции не будет сделано с правой way.you должны быть уверены, что данный сфера IS ON template.For проверить его можно распечатать код области в template.As вы знаете, каждый область видимости имеет свой идентификатор, поэтому, если область видимости и область видимости шаблона не совпадают, ваша проблема находится в ней, и решение таково:

, чтобы скомпилировать его в правильном направлении. $ compile service: $ compile (template) (directiveScope);

вы можете утешать масштаб и увидеть поля Я говорю о

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