Watch in directives controller not working

Question

Я пытался посмотреть переменную scope внутри контроллера директив, который я ввел через шаблон. Но слушатель никогда не запускается.

http://plnkr.co/edit/a9UWiVZlKhaKf0Z0utSG?p=preview

var angularSimpleAuth = angular.module('angularSimpleAuth', []); 
angularSimpleAuth.directive('simpleAuthUsername',function(){ 
     return { 
      restrict: 'A', 
      scope:{}, 
      template:'<input type="text" ng-model="userName" />', 
      controller:function($scope){ 
       $scope.$watch('userName',function(val){ 
        console.log('Value'+val); 
       }); 
      }, 
      link: function($scope, elem, attrs,controllers) { 
       console.log('In link for username'); 

      } 
     }; 
    }) 

Может кто-нибудь сказать мне, что я делаю неправильно here.Any помощь оценили Благодаря

Answer 1

Проблема была у вас есть директива применяется на входе элемента. Поскольку директива уже выполняет элемент ввода, она либо должна быть помечена как элемент, либо применена с атрибутом, заменяющим true.

Изменить ваш HTML, чтобы:

<simple-auth-username></simple-auth-username> 

И директива:

angularSimpleAuth.directive('simpleAuthUsername',function(){ 
    return { 
     restrict: 'E', 
     scope:{}, 
     template:'<input type="text" ng-model="userName" />', 
     controller:function($scope){ 
      $scope.$watch('userName',function(val){ 
       console.log('Value'+val); 
      }); 
     }, 
     link: function($scope, elem, attrs,controllers) { 
      console.log('In link for username'); 

     } 
    }; 
})