[AngularJS] Compile(), element(), link(), watch()
angularjs Element Link watch compile
2023-09-14 08:59:21 时间
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>
相关文章
- [AngularJS] Services, Factories, and Providers -- Service vs Factory
- [D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive
- [AngularJS + cryptoJS + Gravatar] Provider vs factory
- [AngularJS] Accessing Data in HTML -- controllerAs, using promises
- [AngularJS] Angular 1.3 ngMessages with ngAnimate
- AngularJS学习---Routing(路由) & Multiple Views(多个视图) step 7
- Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma
- [AngularJS] AngularJS $cacheFactory service
- [AngularJS] Taking control of your templates using $templateCache
- [AngularJS]9. Panel Controller
- [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作
- [Angularjs]asp.net mvc+angularjs+web api单页应用
- Angularjs 源码分析4
- angularjs 中的scope继承关系——(2)
- 深入理解angularjs $watch ,$apply 和 $digest --- 理解数据绑定过程