快乐10分走势图

当前位置: 快乐10分走势图 > xp系统教程 > 电脑教程 > 详细页面

xp系统u盘安装gho,AngularJS 指令

发布时间:2019-04-19 11:44:31 文章来源:快乐10分走势图-云南快乐10分走势-广东快乐十分钟走势 作者: 刘晶技术员

angular自定义指令的两种写法:

快乐10分走势图上面这种,感觉更清晰明确一点。

// angular.module('MyApp',[]) // .directive('zl1',zl1) // .controller('con1',['$scope',func1]); // // function zl1(){ // var directive={ // restrict:'AEC', // template:'this is the it-first directive', // }; // return directive; // }; // // function func1($scope){ // $scope.name="alice"; // } //这是教程里类似的写法 angular.module('myApp',[]).directive('zl1',[ function(){ return { restrict:'AE', template:'thirective', link:function($scope,elm,attr,controller){ console.log("这是link"); }, controller:function($scope,$element,$attrs){ console.log("这是con"); } }; }]).controller('Con1',['$scope',function($scope){ $scope.name="aliceqqq"; }]);

Alice

快乐10分走势图che***0503@163.com

2年前 (2016-12-29)

#8

Alice

快乐10分走势图che***0503@163.com

还有指令快乐10分走势图配置项的:link controller等在项目运用中有遇到过:

angular.module('myApp', []).directive('first', [ function(){ return { // scope: false, // 默认值,共享父级作用域 // controller: function($scope, $element, $attrs, $transclude) {}, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment template: 'first name:{{name}}', }; }]).directive('second', [ function(){ return { scope: true, // 继承父级作用域并创建指令自己的作用域 // controller: function($scope, $element, $attrs, $transclude) {}, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment //当修改这里的name时,second会在自己的作用域中新建一个name变量,与父级作用域中的 // name相对独立,所以再修改父级中的name对second中的name就不会有影响了 template: 'second name:{{name}}', }; }]).directive('third', [ function(){ return { scope: {}, // 创建指令自己的独立作用域,与父级毫无关系 // controller: function($scope, $element, $attrs, $transclude) {}, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment template: 'third name:{{name}}', }; }]) .controller('DirectiveController', ['$scope', function($scope){ $scope.name="mike"; }]);

Alice

快乐10分走势图che***0503@163.com

2年前 (2016-12-29)

#7

跟我回高老庄

807***326@qq.com

ng-model 是用于表单元素的,最好用的xp系统,支持双向绑定。对普通元素无效;

快乐10分走势图ng-bind 用于普通元素,不能用于表单元素,应用程序单向地渲染数据到元素;

当 ng-bind 和 {{}} 同时使用时,最新xp系统手机版,ng-bind 绑定的值覆盖该元素的内容。

用 ng-bind 比 {{}} 友好很多。

跟我回高老庄

快乐10分走势图807***326@qq.com

快乐10分走势图2年前 (2017-06-09)

#6

奕溟

快乐10分走势图zxq***xszwm@163.com

首先,非常感谢Alice提供代码!!

<body ng-app="myApp" ng-controller="YiMing"> 姓名: <input type="text" ng-model="name"/> <br/>     <first/> <second/> <script> angular.module('myApp', []).directive('first', [ function(){ return { restrict: 'AE', template: 'first name:{{name}}' }; }]).directive('second', [ function(){ return { scope: {}, // 创建指令自己的独立作用域,与父级毫无关系 controller: function($scope) { $scope.name="YiMing" }, restrict: 'AE', template: 'second name:{{name}}' }; }]).controller('YiMing', ['$scope', function($scope){ $scope.name="YiMing"; }]); </script> </body>

尝试一下

1. 当同时调用first和second时,只有first生效,两个template不会同时出现。

快乐10分走势图2. 当设置了 scope:{} 之后,{{name}}获取不到了,原因就是作用域的问题,想要设置这里的name的值,可以再加一个controller的字段。

奕溟

快乐10分走势图zxq***xszwm@163.com

快乐10分走势图2年前 (2017-08-02)

#5

菜鸟

快乐10分走势图643***369@qq.com

借用Alice的代码继续 关于自定义的指令内容解读

angular.module('myApp', []).directive('first', [ function(){ return { scope: false, //默认值为 false 共享父作用域 值为true时共享父级作用域并创建指令自己的 controller: function($scope, $element, $attrs, $transclude) {}, //作用域 值为{}时创建全新的隔离作用域, 值为string时为控制器名称 restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment template: 'first name:{{name}}',//值为string、function 用于显示dom元素 templateUrl: 'xxx.html' //值为string function 以id为xxx.html为 调用文件显示 priority: 0 //指明指令的优先级,若在dom上有多个指令优先级高的先执行 replace: flase // 默认值为false 当为true是直接替换指令所在的标签 terminal: true //值为true时优先级低于此指令的其它指令无效 link:function // 值为函数 用来定义指令行为从传入的参数中获取元素并进行处理 }; }]).directive('second', [ function(){ return { scope: true, // controller: function($scope, $element, $attrs, $transclude) {}, restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment //当修改这里的name时,second会在自己的作用域中新建一个name变量,与父级作用域中的 // name相对独立,所以再修改父级中的name对second中的name就不会有影响了 template: 'second name:{{name}}', }; }]) .controller('DirectiveController', ['$scope', function($scope){ $scope.name="mike"; }]);

菜鸟

643***369@qq.com

1年前 (2017-11-14)

#4

黑绚源

快乐10分走势图861***478@qq.com

  参考地址

templateUrl 除了接受 String,可以接受 function(elem,attr){}

测试实例:

快乐10分走势图customer-address.html 文件代码:

Address: {{customer.address}}

customer-name.html 文件代码:

Name: {{customer.name}}

以上就是xp系统u盘安装gho,AngularJS 指令的全部内容,本文作者:刘晶技术员所写的原创文章仅此参考,具体的操作技术和了解多少电脑知识还是要看你本人去操作。本文来源:快乐10分走势图-云南快乐10分走势-广东快乐十分钟走势快乐10分走势图 转载请注明,谢谢!

本文关键词: 指令 AngularJS
文章标题:xp系统u盘安装gho,AngularJS 指令
相关文章