这篇文章将为大家详细讲解有关AngularJS怎么实现自定义指令及指令配置项的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。
AngularJS自定义指令有两种写法:
//第一种
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";
}]);
指令配置项
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";
}]);
关于“AngularJS怎么实现自定义指令及指令配置项的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。