注意指令控制器不工作

时间:2015-01-03 15:37:15

标签: javascript angularjs angularjs-directive

我试图在指令控制器中观察一个范围变量,我通过模板注入。但是监听器似乎永远不会触发。

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');

            }
        };
    })

有谁能告诉我这里我做错了什么。有任何帮助表示感谢 感谢

1 个答案:

答案 0 :(得分:0)

问题是您已将指令应用于input元素。由于该指令已经呈现了一个输入元素,因此它要么被标记为元素,要么应用属性replace 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');

        }
    };
})