AngularJs 指令directive之controller,link,compile
来源:互联网 发布:lda模型 矩阵分解 编辑:程序博客网 时间:2024/05/17 08:01
关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller。不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名。另外一个需知道的地方,指令命名时用驼峰规则,使用时用-分割各单词。如:定义myDirective,使用时 像这样:<my-directive>。
这里列出directive的合法命名:
- ng:bind
- ng-bind
- ng_bind
- x-ng-bind
- data-ng-bind
- app.directive('fractionNum',function(){
- return {
- link : function(scope, elements, attrs, controller){
- elements[0].onkeyup = function(){
- if(isNaN(this.value) || this.value<1 || this.value>10){
- this.style.borderColor = 'red';
- }
- else{
- this.style.borderColor = '';
- }
- };
- }
- };
- });
- 分数:<input type="text" ng-model="question.fraction" fraction-num /><br />
controller,link,compile有什么不同 运行结果: 由结果可以看出来,controller先运行,compile后运行,link不运行(link就是compile中的postLink)。将上例中的compile注释掉运行结果: 由结果可以看出来,controller先运行,link后运行,link和compile不兼容。compile改变dom,link事件的触发和绑定
- //directives.js增加exampleDirective
- phonecatDirectives.directive('exampleDirective', function() {
- return {
- restrict: 'E',
- template: '<p>Hello {{number}}!</p>',
- controller: function($scope, $element){
- $scope.number = $scope.number + "22222 ";
- },
- //controllerAs:'myController',
- link: function(scope, el, attr) {
- scope.number = scope.number + "33333 ";
- },
- compile: function(element, attributes) {
- return {
- pre: function preLink(scope, element, attributes) {
- scope.number = scope.number + "44444 ";
- },
- post: function postLink(scope, element, attributes) {
- scope.number = scope.number + "55555 ";
- }
- };
- }
- }
- });
- //controller.js添加
- dtControllers.controller('directive2',['$scope',
- function($scope) {
- $scope.number = '1111 ';
- }
- ]);
- //html
- <body ng-app="phonecatApp">
- <div ng-controller="directive2">
- <example-directive></example-directive>
- </div>
- </body>
- Hello 1111 22222 44444 55555 !
- Hello 1111 22222 33333 !
转载自:http://blog.csdn.net/alex8046/article/details/52299974
想了解更多技术欢迎加入技术交流群:627336556
阅读全文
0 0
- AngularJs 指令directive之controller,link,compile
- AngularJs 指令directive之controller,link,compile
- AngularJs 指令directive之controller,link,compile
- angularjs指令compile、link
- AngularJS之指令中controller与link
- angular.js指令(directive)中的controller,compile,link函数有什么不同?
- AngularJS的指令(Directive) compile和link的区别及使用示例
- angularjs directive内部controller link函数理解
- angular之Directive - Compile vs. Link
- AngularJS之directive指令参数
- angularJS 自定义指令 方法属性:compile、link
- Directive - Compile vs. Link
- angularJS directive中的controller和link function辨析
- AngularJS自定义指令controller和link传参
- Angular自定义指令之compile, link, controller属性详解及实例演示
- AngularJS - Directive/Controller
- AngularJs directive-controller实例
- AngularJs directive-link实例
- C++排序算法之计数排序
- 微信公众平台开发之模板消息(Java)
- J2EE for SpringMvc 中JSP在idea里不能够提示Bootstrap的问题解决
- JS事件10
- POJ 1797Heavy Transportation
- AngularJs 指令directive之controller,link,compile
- UVA 12086 Potentiometers(树状数组|| 线段树单点更新)
- 练习7
- 哪有python入门经典教程资源分享?
- git reset
- 剑指offer:最小的K个数
- git 使用
- 【问题汇总】开发中常见问题的解决办法
- Collections框架简介