AngularJS自定义指令
2016-03-01 11:28
549 查看
一.restrict属性：
示例：
二.replace属性
默认为false,若设置为true，则会移除用户在html中的内容。
三.$templateCache对象：从浏览器缓存中获得html片段
示例：
四.templateUrl属性
五.transclude属性
若设置为true，则保留用户在html中定义的内容。
示例：
六.directive(指令)与controller(控制器)之间的交互
示例：
七.directive(指令)之间的交互
示例：
八.独立作用域scope及三种绑定策略
示例1：
示例2：
示例3：
示例4：
以上部分内容来自慕课网大漠穷秋老师的视频截图
示例：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <hello></hello> <div hello></div> <div class="hello"></div> <!-- directive:hello --> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="HelloAngular_Directive.js"></script> </html>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'AEMC',
template: '<div>Hi everyone!</div>',
replace: true
}
});编译为：二.replace属性
默认为false,若设置为true，则会移除用户在html中的内容。
<hello> <div>这里是指令内部的内容。</div> </hello>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict:"AE",
template:"<div>Hello everyone!</div>",
replace:true
}
});编译为：三.$templateCache对象：从浏览器缓存中获得html片段
示例：
<hello></hello>
var myModule = angular.module("MyModule", []);
//注射器加载完所有模块时，此方法执行一次
myModule.run(function($templateCache){
$templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>");
});
myModule.directive("hello", function($templateCache) {
return {
restrict: 'AECM',
template: $templateCache.get("hello.html"),
replace: true
}
});编译结果：四.templateUrl属性
<hello></hello>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'AECM',
templateUrl: 'hello.html',
replace: true
}
});最后编译的结果为：用户定义的html片段内容。五.transclude属性
若设置为true，则保留用户在html中定义的内容。
示例：
<hello> <div>这里是指令内部的内容。</div> </hello>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict:"AE",
transclude:true,
template:"<div>Hello everyone!<div ng-transclude></div></div>"
}
});编译为：六.directive(指令)与controller(控制器)之间的交互
示例：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="MyCtrl"> <loader howToLoad="loadData()">滑动加载</loader> </div> <div ng-controller="MyCtrl2"> <loader howToLoad="loadData2()">滑动加载</loader> </div> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="Directive&Controller.js"></script> </html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("加载数据中...");
}
}]);
myModule.controller('MyCtrl2', ['$scope', function($scope){
$scope.loadData2=function(){
console.log("加载数据中...22222");
}
}]);
myModule.directive("loader", function() {
return {
restrict:"AE",
link:function(scope,element,attrs){
element.bind('mouseenter', function(event) {
//scope.loadData();
// scope.$apply("loadData()");
// 注意这里的坑，howToLoad会被转换成小写的howtoload
scope.$apply(attrs.howtoload);
});
}
}
});将鼠标分别移动到元素上得到结果：七.directive(指令)之间的交互
示例：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="Directive&Directive.js"></script> </head> <body> <div class="row"> <div class="col-md-3"> <superman strength>动感超人---力量</superman> </div> </div> <div class="row"> <div class="col-md-3"> <superman strength speed>动感超人2---力量+敏捷</superman> </div> </div> <div class="row"> <div class="col-md-3"> <superman strength speed light>动感超人3---力量+敏捷+发光</superman> </div> </div> </body> </html>
var myModule = angular.module("MyModule", []);
myModule.directive("superman", function() {
return {
scope: {}, //独立作用域
restrict: 'AE',
controller: function($scope) { //暴露共用的属性和方法
$scope.abilities = [];
this.addStrength = function() {
$scope.abilities.push("strength");
};
this.addSpeed = function() {
$scope.abilities.push("speed");
};
this.addLight = function() {
$scope.abilities.push("light");
};
},
link: function(scope, element, attrs) { //操作DOM
element.addClass('btn btn-primary');
element.bind("mouseenter", function() {
console.log(scope.abilities);
});
}
}
});
myModule.directive("strength", function() {
return {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addStrength();
}
}
});
myModule.directive("speed", function() {
return {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addSpeed();
}
}
});
myModule.directive("light", function() {
return {
require: '^superman',
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addLight();
}
}
});将鼠标分别移到相应元素得到结果：八.独立作用域scope及三种绑定策略
示例1：
<hello></hello> <hello></hello> <hello></hello> <hello></hello>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'AE',
scope:{}, //独立作用域
template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
replace: true
}
});示例2：
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'@'
},
template:"<div>{{flavor}}</div>"
// ,
// link:function(scope,element,attrs){
// scope.flavor=attrs.flavor;
// }
}
});最后结果解析为：示例3：
<div ng-controller="MyCtrl"> Ctrl: <br> <input type="text" ng-model="ctrlFlavor"> <br> Directive: <br> <drink flavor="ctrlFlavor"></drink> </div>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'='
},
template:'<input type="text" ng-model="flavor"/>'
}
});解析结果：示例4：
<div ng-controller="MyCtrl"> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </div>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});以上部分内容来自慕课网大漠穷秋老师的视频截图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS Scope (作用域)
- Angular SEO方案
- AngularJS基础---模块
- AngularJs(七) 过滤器（filter）
- angular2使用简单介绍
- angularJS实现checkbox数据绑定
- 一步步构建自己的AngularJS(2)——scope之$watch及$digest
- AngularJS模型
- AngularJs和django的模板冲突问题解决
- AngularJs 指令
- 使用angular2开发管理系统项目
- AngularJs 指令
- AngularJS的路由、模块、依赖注入
- angularJs的ng-class切换class
- angular路由小笔记
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
- angular路由参数传递
- AngularJS简介
- karma + Jasmine 自动化测试AngularJS代码