AngularJS自定义指令

最新推荐文章于 2024-06-26 14:51:29 发布
最新推荐文章于 2024-06-26 14:51:29 发布
阅读量1w 收藏 6
点赞数 3
分类专栏： AngularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bboyjoe/article/details/50770856
版权

一.restrict属性：


示例：

<!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/>'
    }
});
   



以上部分内容来自慕课网大漠穷秋老师的视频截图

bboyjoe
关注
专栏目录
angularjs自定义指令directive正则表达校验
07-05
angularjs自定义指令directive，用做http地址校验和数字校验，仅供学习参考使用
AngularJS 自定义指令详解及实例代码
10-21
在本文中，我们将深入探讨AngularJS自定义指令的创建、使用以及内嵌使用。 首先，创建自定义指令需要通过`angular.module().directive()`方法。假设我们已经创建了一个名为`myApp`的模块，我们可以这样定义一个...
AngularJS - 自定义指令
dengtangu7674的博客
02-12 94
这一篇从自定义指令出发，记录了定义一个指令时影响指令行为的各种因素。 试着感受这些因素，让自己更高效地编写AngularJS应用。 Directive 先从定义一个简单的指令开始。 定义一个指令本质上是在HTML中通过元素、属性、类或注释来添加功能。 AngularJS的内置指令都是以ng开头，如果想自定义指令，建议自定义一个前缀代表自己的命名空间。 这里我们先使用...
在Vue 3中使用TypeScript一些高级用法示例
最新发布
极客神殿
06-26 623
使用TypeScript定义自定义指令时，可以确保指令参数和值的类型安全。el.focus();},
走进AngularJs(四)自定义指令----（中）
aigenglong0649的博客
10-30 161
　　上一篇简单介绍了自定义一个指令的几个简单参数，restrict、template、templateUrl、replace、transclude，这几个理解起来相对容易很多，因为它们只涉及到了表现，而没有涉及行为。这一篇将继续学习ng自定义指令的几个重量级参数，了解了它们之后我们的custom directive将不光能“看”，还要能“动”。开始~ 理解compile和link 　...
angularJS 自定义指令
outsiderlcy的博客
11-07 714
angularJS 自定义属性类似于过滤器filter，内置了许多方法同时可以自定义方法。 通过angular.model来创建模块对象：-angular.model: controller:控制器 run：初始化 filter：过滤器 directive：创建自定义（myHello->my-hello） -restrict有四种定义的方式（注意大小写）：指定指令类型并可叠加使用 》E：元
AngularJS 自定义指令详解及示例代码
11-23
在AngularJS中，自定义指令是构建可复用组件的关键特性，它允许开发者创建全新的HTML元素、属性、CSS类甚至注释，从而定制化DOM元素的行为。 自定义指令的定义通常包括以下几个部分： 1. **restrict**：限制指令...
详解angularJS自定义指令间的相互交互
01-19
AngularJS 自定义指令 transclude：当元素标签需要嵌套时使用，与ng-transclude配合使用。默认值为false不能使用嵌套，true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。 代码示例：...
AngularJS 自定义指令 - ECharts 2 雷达图
09-24
1. **AngularJS自定义指令**： AngularJS的自定义指令允许开发者扩展HTML的功能，创建可重用的组件。它们可以绑定到DOM元素上，添加新的行为或改变元素的外观。自定义指令的定义通常包括`restrict`、`scope`、`link...
Angularjs自定义指令Directive详解
10-19
AngularJS自定义指令的创建通常通过定义一个模块，并在该模块中使用`.directive()`方法注册一个指令。`restrict`属性用来定义指令的使用方式，它可以是元素、属性、类或注释。`require`属性用来定义指令依赖的其他...
angular自定义指令
weixin_30810583的博客
07-26 127
angular自定义指令 angularJS 中内置了很多指令，但是有时候这些内置的指令满足不了我们的需求，这时候我们就需要自己定义指令，angular中提供了自定义的指令的方法，使用关键字directive,下面介绍一下他的参数： 参数 描述 template 这是自定义指令的模板，一般放html文件。 replace true/false ...
angularJs自定义指令
yangxiaoyanger的博客
04-09 190
1. 定义对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素 的功能。2.定义指令的方法：第一个参数，指令的名字myDirective 用来在视图中引用特定的指令。第二个参数是一个函数，这个函数返回一个对象，$compile服务利用这个方法返回的对 象，在DOM调用指令时来构造指令的行为。3.指令设置的选项restrict 指令在DOM中可以何种形式被引用或声明E（元...
angularjs 中directive自定义指令介绍
weixin_34417814的博客
09-23 88
2019独角兽企业重金招聘Python工程师标准>>> ...
AngularJS指令开发（1）——参数详解
weixin_33836223的博客
11-01 532
费了不少时间泡在自己的Angular UI for mobile计划，但看来是要搁置一下。一个是因为最近公司项目紧，自己还要忙着考驾照，心力交瘁啊。当然，最重要的原因还是，在Angular的使用上，钻得越深，发现水越深，不得不停下来，重新整理一下知识点。 赶紧开始。 指令，很重要 AngularJS与JQuery最大的区别在哪里？我认为，...
AngularJS笔记--自定义指令
angwanli1764的博客
07-21 181
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件。AngularJS提供了自定义指令功能，我们可以在指令里面定义特定的html模板。提供给前台html调用. 一. 指令的简单定义. 下面定义了一个简单的控件，点击后调转到博客园。 Note: 1.命名方式:directive必须以小写字母...
AngularJS 的自定义指令
weixin_34050005的博客
06-02 176
这是一篇angularjs自定义指令的教程。就让我们来看看,如何在angularjs中自定义指令吧！我们将利用现有的guitar angularjs app，这在 教程14: AngularJ表单验证 中用到过。你可以在这里下载 之前的app.好吧，现在我们看看angularjs的指令。我们知道: Angularjs Directives是DOM元素(例...
angularJS之自定义指令
yanyanforest的专栏
06-29 325
1. 自定义指令的创建：使用 .directive 函数来添加自定义的指令：自定义指令的名字采用驼峰命名法。但在使用的时候以 - 分割如： runoob-directive<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值