联赛网站建设不足,连接国外网站的app,建设网站公司域名,做网站公司工资前面一直在说自定义指令#xff0c;但是却一直没有一次系统地去了解#xff0c;现在需要我们一起来学习如何去使用自定义指令#xff0c;去丰富html标签、属性#xff0c;实现多元化、多功能的标签#xff08;或是属性#xff09;。辣么#xff0c;啥是指令#xff1f;…前面一直在说自定义指令但是却一直没有一次系统地去了解现在需要我们一起来学习如何去使用自定义指令去丰富html标签、属性实现多元化、多功能的标签或是属性。辣么啥是指令要了解指令首先需要了解AngularJs的HTML编译器简单地说让浏览器认识你自定义指令或是Angular的指令集将其行为运用到DOM上视图分两个过程编译和链接编译阶段是遍历DOM并且收集所有的相关指令生成一个链接函数链接阶段是给通过编译阶段调用所说的链接函数来将模板与作用域链接起来绑定一个作用域生成一个动态的视图。作用域模型的任何改变都会反映到视图上并且视图上的任何用户操作也都会反映到作用域模型。
那么说到底由某个属性、元素名称、css类名出现而导致的行为或者说是DOM的变化能让你以一种声明式的方法来扩展HTML表示能力这就是指令
官网忽略http://t.cn/RUbL4rP也写了一个比较详细的指令demo具体属性分析如下: var myModule angular.module(...);
myModule.directive(directiveName, function factory(injectables) { //工厂函数里面injectables是何意呢望知道的人告知
var directiveDefinitionObject {
priority: 0, //优先级priority,Dom里面会有很多指令定义优先级可以使此指令优先执行
terminalfalse, //如果被设置为true那么该指令就会在同一个DOM的指令集和中最后被执行
template: div/div, // or // function(tElement, tAttrs) { ... },
// templateUrl: directive.html, // or // function(tElement, tAttrs) { ... }, //template或templateUrl顾名思义就是模板文件可以编写也可以url也可以是function(tElement,tAttrs){ return ... ;}
replace: false, //是否替换现在的元素
transclude: false, //重要属性之一配合ng-transclude使用为true时可以将原元素的内容html、其他指令提取到带有指令ngTransclude的元素内下面有例子说明注指令的内部可以访问外部指令的作用域并且模板也可以访问外部的作用域对象
restrict: A, //以哪种形式声明指令行为的格式有AECM分别是属性div my-directiveexp /div 、元素*my-directive/my-directive 、 class*div classmy-directive: exp;/div 、注释!-- directive: my-directive exp --
templateNamespace: html, //模板的命名空间,有html、svg等默认为html
scope: false, //是否创造一个新的作用域针对指令 /*scope是最难理解的一个属性*/
controller: function($scope, $element, $attrs, $transclude, otherInjectables) {...
}, //控制器的构造对象预编译阶段执行$scope当前作用域$element当前元素$attrs当前元素的属性集合并且它是共享的其他指令可以通过它的名字得到参考依赖属性通过require属性引入。这就使得指令间可以互相交流来扩大自己的能力。当然也可以是控制 器名字那么此控制器需要在应用声明好这样便可以通过注入$attrs、$element操纵指令对应模板的dom$transclude用来操作嵌入作用域对应的dom也就是被提取到ngTransclude的元素里面的dom了下面有例子说明
controllerAs: stringAlias, //定义控制器的别名
require: siblingDirectiveName, // or // [^parentDirectiveName, ?optionalDirectiveName, ?^optionalParent], // 请求将另一个控制器作为参数传入到当前链接函数。 这个请求需要传递被请求指令的控制器的名字。之前有例子关于表单自定义 验证有使用到学习笔记-AngularJs(八)
compile: function compile(tElement, tAttrs, transclude) { //tElement指令所在的元素,tAttrs指令所在元素属性集合
return {
pre: function preLink(scope, iElement, iAttrs, controller) {...
},
post: function postLink(scope, iElement, iAttrs, controller) {...
}
}
// or
// return function postLink( ... ) { ... } //编译函数是用来处理需要修改模板DOM执行于放到dom之前的dom操作的情况的。因为大部分指令都不需要修改模板所以这个函数也不常用。返回的是函数或是对象返回函数时等效于link链接函数
},
// or
// link: { //链接函数负责注册DOM事件和更新DOM。它是在模板被克隆之后执行的。 它也是大部分指令逻辑代码编写的地方。scope当前作用域iElement当前元素iAttrs当前元素的属性集合controller就是上面require属性的值于是就可以调用require进来的控制 器的属性方法,包括之前讲的ngModel或是其他指令controller和controllerAs定义的有控制器名的控制器方法
// pre: function preLink(scope, iElement, iAttrs, controller) { ... }, // post: function postLink(scope, iElement, iAttrs, controller) { ... } // } // or // link: function postLink( ... ) { ... }
};
return directiveDefinitionObject;
}); compile和link选项是互斥的。如果同时设置了这两个选项那么会把compile所返回的函数当作链接函数而link选项本身则会被忽略。
编译函数负责对模板DOM进行转换。链接函数负责将作用域和DOM进行链接。
上面demo有些属性在实际操作上都是取默认的属性那么官网将其简化成了这个样子 var myModule angular.module(...);
myModule.directive(directiveName, function factory(injectables) { //此处需要注意在视图引入指令时采用的是骆峰命名法所以调用时应该是directive-name
var directiveDefinitionObject {
link: function postLink(scope, iElement, iAttrs) { ... }
};
return directiveDefinitionObject;
// or
// return function postLink(scope, iElement, iAttrs) { ... }
}); View Code到这里还是需要编写些demo才能起到学习的效果
在之前的学习笔记-AngularJs八里面就有一个自定义表单验证的demo情景是这样的在input框里面不能写入“xiaobin”主要是对ngModel中$setValidity(validationErrorKey, isValid);和$setViewValue(value, trigger);在双向绑定中是如何实现scope-view、view-scope之间的那个验证和格式化的学习没看过的话可以去看一下虽然理解得不透彻下面贴一下主要代码 var custom angular.module(customControl, [ngSanitize]);
custom.directive(noxiaobin, function () {
return {
restrict: A,
require: ?ngModel,
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.push(function (v) { //传说中的验证器
if (v ! xiaobin) {
ngModel.$setValidity(noxiaobin, true); //通过获取从dom过来的值然后进行验证使用$setValidity(noxiaobin, true);改变noxiaobin的值然后反馈会dom
return v;
} else {
ngModel.$setValidity(noxiaobin, false);
return undefined;
}
});
}
}
}); View Code在这里我们另外写一个比较综合的例子dialog.html可到github下载github地址https://github.com/xiaobin5201314/AngularJS-Learning/tree/master/block-example/指令-13 !doctype html
html ng-appdirectiveModule
head
meta charsetutf8/
script src../jquery.js/script
script src../angular.js/script
script src../bootstrap.min.js/script
link relstylesheet href../bootstrap.min.css
script
var directive angular.module(directiveModule, []);
//这里是验证指令的内部可以访问外部指令的作用域这样我们在dialog.html也可以查看到遍历出来的的arrs
directive.controller(directiveControl,[$scope,function($scope){
$scope.arrs[我是内容一,我是内容二,我是内容三];
$scope.hidefalse;
}])
//将任意可以被注入的ng服务注入到控制器中便可以在指令中使用它了。控制器中也有一些特殊的服务可以被注入到指令当中,当然这是在应用上声明、也可以直接写在controller属性上
directive.controller(directiveChildControl,[$scope,$attrs,$element,$transclude,function($scope,$attrs,$element,$transclude){
$element.css(border, #fff); //改变模板dom里面的结构
$transclude(function (clone) { //这是操作嵌入的作用域里面的dom
var a angular.element(a);
a.attr(href, http://www.cnblogs.com/wuxiaobin);
a.text(我的博客原地址);
$element.find(.modal-body).append(a);
});
}])
directive.directive(dialog, function () {
return {
restrict: AE,
replace: true,
transclude:true, //配合ng-transclude使用为true时可以将原元素的内容html、其他指令提取到带有指令ngTransclude的元素内
controller:directiveChildControl,
scope:{
title: //模板也可以访问外部的作用域对象,dialog.html的{{title}}正是局部作用域访问父作用域的所产生的效果这样可以很好实现我们的组件的设计思想但对于、、的写法有些不理解望有更好的学习资料可以提供一下当然搞懂了也会更新上来
},
templateUrl: dialog.html,
link: function(scope, element, attrs, ctrl) {
console.log(element.html());
element.find(.modal-title).css(color, red);
}
}
});
/script
/head
body ng-controllerdirectiveControl
button classbtn btn-lg btn-primary data-togglemodal data-target#myModal弹出模态框/button
dialog title我是传递过来的title
span ng-repeatarr in arrs ng-hidehide
{{$index}}-{{arr}} br
/span
我的内容即将保存被提取到code span[ng-transclude] /code上
/dialog
/body
/html 效果图 更多专业前端知识请上
【猿2048】www.mk2048.com
