去哪找人做网站,南昌企业建设网站开发,跨境电商有哪些平台,电子商务网站建设的方法有哪些指令#xff08;directive#xff09;是angular里面最核心也是最难懂的东西#xff0c;在慕课网看了下大漠穷秋老湿的视频#xff0c;自己百度半天做了一些小test#xff0c;总算把一切都搞明白了。 先列出学习来源#xff1a; 指令中controller和link的区别#xff1a;…指令directive是angular里面最核心也是最难懂的东西在慕课网看了下大漠穷秋老湿的视频自己百度半天做了一些小test总算把一切都搞明白了。 先列出学习来源 指令中controller和link的区别http://www.cnblogs.com/CreateMyself/p/5568202.html angular视频教程http://www.imooc.com/learn/156 指令中的隔离 Scope https://blog.coding.net/blog/angularjs-directive-isolate-scope angular学习笔记https://www.zouyesheng.com/angular.html#toc68 一、指令的创建 首先你得先创建一个module var module1 angular.module(module1,[]); angular.bootstrap(document.body,[module1]); 然后你还得有一个对应的controller var module1 angular.module(module1,[]);module1.controller(ctl1, function($scope) {$scope.content i\m, module 1;$scope.name module1;$scope.save function() {console.log(is function save);};
}); angular.bootstrap(document.body,[module1]); 然后你就可以安心的创建指令了 // 衔接上面的代码m1.directive(testDirective, function() {// 将对象return出去return{restrict: E,// 指令类型 Eelement Aattribute Mcomment C: classtemplate: div我是指令生成的内容/div;replace: true, //使用模板替换原始标记 指令内原本的数据将被清空}
}); angular.bootstrap(document.body,[module1]); 对应的html可以这样写 bodydiv ng-controllerctl1{{content}}test-directive这是原本的内容/test-directive/div
/body 以上代码需要注意一下几点 1.我们定义的指令名称是testDirective但是在html中要写成test-directive。 2.我们把指令里面的代码都放在了function中的return里面其实return出去的内容就是整个指令对象。 3.angular.bootstrap(document.body,[module1]);相当于我们在html中使用ng-app指令。推荐使用bootstarp而不是ng-app; 二、指令的属性 指令的属性如下 namepriorityterminalscopecontrollerrequirerestricttemplatetemplateUrlreplacetranscludecompilelink其中的name、priority、terminal不做详细的介绍。 name就是指令名对应上面代码中的testDirectivepriority多个指令设置在同一个元素上的执行优先级,执行顺序从低至高:123.priority的值为正整数比如priority: 1, terminal, true/false 如果为true,同一个元素上的其他指令的优先级高于本指令其他指令将停止执行 priority和terminal传送门 1.restrict属性 angular内置的一些指令比如ng-appng-click之类的都是以html元素的属性atrrbile的形式来实现的我在使用ionic框架的时候里面有很多自定义的标签、比如ion-content/ion-content。这也是一个指令他是通过html元素(element)来实现的。除了这两个之外指令还支持class(html标签的class属性)、commment(html中的注释)来实现。 在JS代码中restrict可以有以下赋值 restrict: AE,// 指令类型 Eelement Aattribute Mcomment C: class 可以是多个restrict: AEMC也可以是一个restrict: E。在html中对应的写法为 其中注释 !-- 两边一定要留空格不然什么都不会发生 -- 2.template和templateUrl 同一个指令中只能template和templateUrl只能选其一。 template为模板内容。即你要在指令所在的容器中插入的html代码。 template属性接收一个字符串类似这样 template: div我是指令生成的内容/div; 你也可以将整个template写得很复杂但是复杂的代码非常不易维护。并且你还得换行得用字符串拼接每一行。 当你的tamplate超出10行就会显得辣眼睛过长的template建议使用templateUrl代替。 templateUrl为从指定地址获取模板内容。即你要在指令所在的容器中插入的一个.html文件。 有了templateUrl我们就可以将想实现的内容写成一个单独的html模版在需要的地方插入使用起来会很舒服。 这里的templateUrl类似于JSP中的includeangular也有一个ng-include指令。 具体的详细请点连接http://www.ziqiangxuetang.com/angularjs/angularjs-include.html 3.replace和transclude replace是否用模板替换当前元素。true : 将指令标签替换成temple中定义的内容,页面上不会再有my-directive标签false 则append追加在当前元素上即模板的内容包在my-directive标签内部。默认false。 transculde是否使用ng-transculde来包含html中指令包含的原有的内容接收两个参数true/false 先上例子replace var app angular.module(app, []).directive(hello, function () {var option {restrict: AECM,template: h3Hello, Directive/h3,replace: true //这里replace为true所以原来的内容会被template代替};return option;}) htmlhead/headbodyhello我是原来的内容/hello 变成h3Hello, Directive/h3 如果replace为false helloh3Hello, Directive/h3/hello /body /html transclude: var app angular.module(app, []).directive(hello, function () {var option {restrict: AECM,template: h3Hello, Directive/h3span ng-transclude/span,transculde: true //这里transculde为true所以原来的内容会被放在有ng-transclude属性的标签内};return option;}) htmlhead/headbodyhello我是原来的内容/hello 变成helloh3Hello, Directive/h3span ng-transclude我是原来的内容/span/hello
/body
/html 4.指令中的scope directive 默认能共享父 scope 中定义的属性例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。 但是当你要创建一个可以重复使用的directive的时候就不能依赖于父scope了因为在不同的地方使用directive对应的父scope不一样。 所以你需要一个隔离的scope我们可以向下面这样来定义我们的scope。 module1.directive(testDirective, function () {return {scope: {value: 提莫队长正在待命},template: Say:{{value}}}
}); 这样就很方便的将我们directive的上下文scope给定义出来了但是如果我想将父scope中的属性传递给directive的scope怎么办呢 directive 在使用隔离 scope 的时候提供了三种方法同隔离之外的地方交互 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串因为 dom 属性是字符串。 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称则属性名称为相同的本地名称。 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。以上三种方式都要在directive的attr属性中进行赋值。上面的话理解起来比较困难我根据自己的理解做了一下修改 只能绑定字符串所以一些简单的继承父scope的属性使用 需要实现双向数据绑定的时候使用 提供一种方式执行一个表达式在父scope的上下文中即使用于将父scope中的函数绑定在指令的scope中 以上的理解也许有些偏颇欢迎指正。 1先说 app.controller(ctl1, function ($scope) {$scope.name hello world;}).directive(testDirective, function () {return {scope: {name: },template: Say{{name}} br改变隔离scope的nameinput typebuttom value ng-modelname classng-pristine ng-valid}
}) div ng-controllerctl1divdiv父scopedivSay{{name}}br改变父scope的nameinput typetext value ng-modelname//div/divdiv隔离scope这个显示为hello worlddiv test-directive name{{name}}/div/divdiv隔离scope不使用{{name}}这个就直接显示为name了div test-directive namename/div /div/div 我们在test-directive指令所在的div上面增加了一个name属性要使用双花括号来给属性赋值。也可以写成nameCopy:nameForCtl,这样写在给directive中的scope的属性赋值的时候获取查询后面的name这个标识对应的属性的值这里nameForCtl在js中是驼峰写法同样的在html中对应的属性名应该写成name-for-ctl。不是很推荐这种写法感觉有点多余。 2 上一个例子中我们使用name{{name}}的形式来传递父scope 的属性对应的值so我们只是把对应的值传递给了directive的scope当我想实现在directive中改变父scope传递过来的值时父scope中的值也对应的改变显然用这种方法走不通。 这时就派上用场了。 app.controller(ctl1, function ($scope) {$scope.user {name: hello,id: 1};}).directive(testDirective, function () {return {scope: {user: },template: Say{{user.name}} br改变隔离scope的nameinput typebuttom value ng-modeluser.name/}}) div ng-controllerctl1div父scopedivSay{{user.name}}br改变父scope的nameinput typetext value ng-modeluser.name//div/divdiv隔离scopediv isolated-directive useruser/div/divdiv隔离scope使用{{name}}这个会报错div isolated-directive user{{user}}/div /div
/div 这一个例子和上一个例子不同的地方就是属性赋值的时候一个应该使用{{}},一个不该使用。为了实现双向数据绑定angular会使用‘’对应的属性的值与父scope中的属性进行匹配然后传递给diractive中的scope。至于实现的细节和原理这里我就不说了其实是不大清楚。 3 方式提供一种途经使directive 能在父 scope 的上下文中执行一个表达式。此表达式可以是一个 function。其实说白了就是可以使用在父scope中定义的函数。 比如当你写了一个 directive当用户点击按钮时directive 想要通知 controllercontroller 无法知道 directive 中发生了什么也许你可以通过使用 angular 中的 event 广播来做到但是必须要在 controller 中增加一个事件监听方法。最好的方法就是让 directive 可以通过一个父 scope 中的 function当 directive 中有什么动作需要更新到父 scope 中的时候可以在父 scope 上下文中执行一段代码或者一个函数。 app.controller(ctl1, function ($scope) {$scope.value hello world;$scope.click function () {$scope.value Math.random();};}).directive(testDirective, function () {return {scope: {action: },template: input typebutton value在directive中执行父scope定义的方法 ng-clickaction()/}}) div ng-controllerctl1div父scopedivSay{{value}}/div/divdiv隔离scopediv isolated-directive actionclick()/div/div
/div 在上面的例子中我们的属性action赋值为一个方法actionclick()这样一写一眼就看出来是个什么东西了好像也没什么好解释的。 5.controller、require以及link 这三个涉及到指令的执行过程本人暂时还没有比较完全的理解所以这里只能让大家去看别人写的博客了原谅我太笨 连接在顶部。嗯。 ↑点击返回顶部转载于:https://www.cnblogs.com/ermu-learn/p/5913760.html
