angular之 ——自定义指令（dirctive）
来源：互联网 发布：阮星竹 知乎 编辑：程序博客网 时间：2024/06/11 04:16
##angular之 ——自定义指令（dirctive）dirctive中包含的属性：* restrict属性：restrict:’A’,’C’,’E’,’M’.分别代表属性，class，元素和注释，推荐使用A或者E，有利于复用* template/templateUrl:模板* replace:其属性值为布尔值，代表当restrict为E时，是否用模板完全替代* transclude:当存在子元素时，是否要保存子元素。默认为false。需与ng-transclude配合使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp"> <hello> 111 </hello> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> angular.module("myApp", []) .directive("hello", function() { return { restrict: 'ACE', template: "<div>hello angular<span ng-transclude></span></div>", replace: true, transclude: true } }) .controller("myController", ["$scope", function($scope) { }]) </script> </body> </html><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> </head> <body ng-app="myApp"> <surpermen strong>1111</surpermen> <surpermen strong speed>1111</surpermen> <surpermen strong speed light>222</surpermen> <script type="text/javascript"> var myApp = angular.module("myApp",[]) myApp.directive("surpermen",function(){ return { restrict:"E", scope:{},//独立作用域 controller:["$scope",function($scope){ //this指向controller $scope.asibility = []; this.addStrong = function(){ $scope.asibility.push("strong"); }; this.addSpeed = function(){ $scope.asibility.push("speed"); } this.addLight = function(){ $scope.asibility.push("light"); } }], link:function(scope,element,attr){ element.on("mouseenter",function(){ console.log(scope.asibility) }) } } }) .directive("strong",function(){ return { restrict:"A", require:"^surpermen", link:function(scope,element,attrs,surpermenCtrl){ surpermenCtrl.addStrong(); } } }) .directive("speed",function(){ return { restrict:"A", require:"^surpermen", link:function(scope,element,attrs,surpermenCtrl){ surpermenCtrl.addSpeed(); } } }) .directive("light",function(){ return { restrict:"A", require:"^surpermen", link:function(scope,element,attrs,surpermenCtrl){ surpermenCtrl.addLight(); } } }) </script> </body></html> app.controller("myController", function ($scope) { $scope.name = "hello world"; }).directive("shareDirective", function () { return { template: 'Say:{{name}}' }});<div ng-controller="myController"> <div share-directive=""></div></div>app.controller("myController", function ($scope) { $scope.name = "hello world";}).directive("isolatedDirective", function () { return { scope: {}, template: 'Say:{{name}}' }});<div ng-controller="myController"> <div isolated-directive=""></div></div> app.controller("myController", function ($scope) { $scope.name = "hello world"; }).directive("isolatedDirective", function () { return { scope: { name: "@" }, template: 'Say：{{name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">' }})<div ng-controller="myController"> <div class="result"> <div>父scope： <div>Say：{{name}}<br>改变父scope的name：<input type="text" value="" ng-model="name"/></div> </div> <div>隔离scope： <div isolated-directive name="{{name}}"></div> </div> <div>隔离scope（不使用{{name}}）： <div isolated-directive name="name"></div> </div> </div> ```= 属性： js代码：```javascript app.controller("myController", function ($scope) { $scope.user = { name: 'hello', id: 1 }; }).directive("isolatedDirective", function () { return { scope: { user: "=" }, template: 'Say：{{user.name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="user.name"/>' } })<div class="se-preview-section-delimiter"></div>父scope：
Say：{{user.name}}
改变父scope的name：
改变父scope的name：
隔离scope：
隔离scope（使用{{name}}）：
“`
& 属性：
& 方式提供一种途经是 directive 能在父 scope 的上下文中执行一个表达式。此表达式可以是一个 function。
比如当你写了一个 directive，当用户点击按钮时，directive 想要通知 controller，controller 无法知道 directive 中发生了什么，也许你可以通过使用 angular 中的 event 广播来做到，但是必须要在 controller 中增加一个事件监听方法。
最好的方法就是让 directive 可以通过一个父 scope 中的 function，当 directive 中有什么动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数。
js代码
app.controller("myController", function ($scope) { $scope.value = "hello world"; $scope.click = function () { $scope.value = Math.random(); }; }).directive("isolatedDirective", function () { return { scope: { action: "&" }, template: '<input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>' } })<div class="se-preview-section-delimiter"></div> <div ng-controller="myController"> <div>父scope： <div>Say：{{value}}</div> </div> <div>隔离scope： <div isolated-directive action="click()"></div> </div></div>结果：
![enter description here][4]
父scope：
Say：{{user.name}}
改变父scope的name：
改变父scope的name：
隔离scope：
隔离scope（使用{{name}}）：
“`
& 属性：
& 方式提供一种途经是 directive 能在父 scope 的上下文中执行一个表达式。此表达式可以是一个 function。
比如当你写了一个 directive，当用户点击按钮时，directive 想要通知 controller，controller 无法知道 directive 中发生了什么，也许你可以通过使用 angular 中的 event 广播来做到，但是必须要在 controller 中增加一个事件监听方法。
最好的方法就是让 directive 可以通过一个父 scope 中的 function，当 directive 中有什么动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数。
js代码
“`javascript
app.controller(“myController”, function (scope) {scope.value = “hello world”;
scope.click = function () {scope.value = Math.random();
};
}).directive(“isolatedDirective”, function () {
return {
scope: {
action: “&”
},
template: ‘’
}
})
```html <div ng-controller="myController"> <div>父scope： <div>Say：{{value}}</div> </div> <div>隔离scope： <div isolated-directive action="click()"></div> </div></div> 0 0
- angular之 ——自定义指令（dirctive）
- Angular自定义指令（初级）
- angular自定义指令（中）
- angular 中的自定义指令之详解API
- 【Angular】——指令
- angular指令学习（三）--自定义指令之compile、link的学习
- angular自定义指令（必填标志）
- angular 自定义指令
- angular js自定义指令
- Angular自定义指令(进阶)
- angular自定义指令
- 创建angular自定义指令
- Angular --- 自定义指令更新
- angular 自定义指令
- angular自定义指令templateUrl
- Angular 自定义指令详解
- 一，Angular自定义指令
- Angular自定义指令
- 【算法】最大窗口
- 什么是Code Review 代码审查
- 【算法】构造数组的MaxTree
- apache2部署访问yaaw
- Python挑战第三题
- angular之 ——自定义指令（dirctive）
- 动态规划：求解最长递增子序列(LIS)
- 【算法】最大矩阵的大小
- linux自动运维（四）-python3的Django环境安装
- 引用队列（ReferenceQueue）浅析
- 【算法】最大值和最小值的差小于或者等于num的子数组数量
- 详解java类的生命周期
- C语言中的链接类型：
- 调试图形(Shader)程序的实战演练,运用普通调试和Visual Studio Graphics Debugger(在VS2015环境下)
