angular的自定义指令---详解

1.angualr指令

　　在angualr自己里面有许多丰富的指令，但都是平时所常见的，但对于自己所需要的可能有所欠缺，所以自己可能会摒弃原声指令，自己封装更为健壮灵活的指令；

　其实angular里面的指令也是基于下面所用到的步骤来创建的，只不过他都添加到了全局中，所以可以直接使用；

2.创建自定义指令

　　首先创建模块app,再使用app的服务directive方法，

　　创建指令内容第一个参数自定义的名字，第二个参数是自定义参数属性对象，该对象包括的属性基本在代码注释解释清楚；

　　　　// a.创建模块var app=angular.module('myApp',[]);// b.创建自定义指令// 第一个参数：指令的名字app.directive('myZhiling',[function(){var obj={restrict:'E',// A:attribue属性,E:element元素标签形式书，C:class以样式名的形式书写。M:comment注释，以注释的形式来书写//template:  '<ul><li>我叫小明</li></ul>',templateUrl:'./view.html',  //指向一个文件，最终angualr会请求这个文件，把里面的//replace:true,//需要提供一个布尔值transclude:true,//需要提供一个布尔值scope:{//获取自定义指令所在元素的属性值suibian:'@term',//suibian这个属性会拿到自定义标签指令中属性名为term的属性值,@符号后面跟上属性名，@只能是指令内传过来的值。obj:'=grade',//=可以跟父控制器相互改变，双向绑定method:'&'//这是简写方式，angualr会寻找属性名为age的属性，并拿到它的值，父控制器内的方法},link:function(scope,element,attributes){//相当于指令模板的控制器！//可以接受scope里面的属性对象，然后再自己的控制器内处理，作用于指令的模板中，},controller:function(){}};return obj;}]);

规则说明：

　　在scope里面的属性，即是自定内传进来的参数，可以是一个对象或是简单的字符串内容，然后就会自动填充到我们指令所在模板的标签位置；

　　指令的模板就是tamplateUrl所指向的文件内的内容；

　　link,controller本质的内容都是相对于指令所用到位置所在控制器的子控制器；

　　指令名驼峰命名，使用时要转变成‘-’连接

　　scope内的多种不同符号的意义；

3.使用介绍：

在自己的项目中使用自己的指令，直接引入即可；

<my-zhiling obj="{name:'张三'}" term="不随便">找小明</my-zhiling>

　　指令在接收到值或在link、controller内所控制到方法，数据等也会填充到指令模板的位置，从而才形成功能强大的指令

转载于:https://www.cnblogs.com/suzhen-2012/p/6648863.html

angular的自定义指令---详解相关推荐

AngularJS自定义指令详解（有分页插件代码）
前言除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
Angular 常用ng指令详解
详解Angular ng内置指令我们依次从使用频率高到低来,重要性大小来说明各种指令. 1.ng-repeat 1.1 一般用法 <ul><li ng-repeat="c ...
Vue自定义指令详解
一.为什么需要自定义指令? 因为vue是MVVM模式,只需要关注于数据和业务逻辑,不需要关注DOM的操作,但是有时候面对一些特殊的业务需求时,需要进行DOM的操作,这个时候就需要进行自定义指令. 二. ...
Vue中过滤器和自定义指令详解
目录 1,局部过滤器 1.1定义: 1.2案例 2,全局过滤器 2.1定义: 2.2案例 3.自定义指令 3.1定义: 3.2案例 3.3自定义指令全局写法 1,局部过滤器 1.1定义: Vue.js ...
Vue高级语法(一) | 自定义指令详解
文章目录 Vue中自定义指令
angular 定义对象_angular 自定义指令详解
一:指令的创建创建module: var module1 = angular.module('module1',[]); angular.bootstrap(document.body,['modu ...
angularJS自定义指令详解
AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用. <hello></hello>或者<hello/> 2.作为一个元 ...
Angular常用ng指令详解
我们依次从使用频率高到低来,重要性大小来说明各种指令. 1.ng-repeat 1.1一般用法 <ul><li ng-repeat="char in [{'alphabet ...
java中Freemarker list指令详解
java Freemarker中list指令主要是进行迭代服务器端传递过来的List集合. 定义 <#list nameList as names> ${names} </#list ...

angular的自定义指令---详解

angular的自定义指令---详解相关推荐

最新文章

热门文章