[AngularJS] Compile(), element(), link(), watch()

Functionail:

When user type "password" in the input.

The div will toggle class to alert-box alert.

/**
 * Created by Answer1215 on 8/23/2014.
 */
var app = angular.module("callApp", []);

app.directive('dumpPassword',function(){

    var pwdEl = angular.element('<div>{{model.text}}</div>');
    this.link = function(scope){
        scope.$watch('model.text', function(value){
            if(value === "password"){
                pwdEl.toggleClass('alert-box alert');
            }
        })
    };
    return{
        restrict: 'E',
        template: '<div> <input type="text" ng-model="model.text"></div>',
        replace:true,
        compile: function(elFromTemplate){
            elFromTemplate.append( pwdEl);
            return link;
        }
    }
});

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Scope &</title>
    <link href="foundation.min.css" rel="stylesheet"/>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="callApp">
    <dump-password></dump-password>
</body>
</html>

posted @ 2014-08-25 17:06 Zhentiw 阅读(275) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

公告

昵称： Zhentiw
园龄： 13年2个月
粉丝： 41
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Answer1215

[AngularJS] Compile(), element(), link(), watch()

公告

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜