angular js中的directive

angular js中的自定义指令

自定义指令return如下指令定义对象：

  • restrict:restrict约束自定义指令的使用形式，取值有A（属性），E（元素），C（类），M（注释）
  • template:该属性指定angular js指令被替换为html模板
  • scope:scope:true 表示创建一个作用域，该作用域继承于父作用域（即ng-controller控制的作用域），
    scope:{} 创建一个完全孤立的作用域，不会继承父作用域的任何数据
    scope:{"@"} 创建一个单向绑定的作用域，改变父作用域的数据会改变子作用域的数据，改变子作用域的数据不会改变父作用域的数据
    scope:{"="} 创建一个双向绑定的子作用域
    scope:{"&"} 创建一个与父作用域方法进行绑定的子作用域
  • controller:该属性用于指令之间的通信，在一个指令中定义方法和属性，以供其他的指令进行调用
<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>复习directive</title>
		<script type="text/javascript" src="../js/angular.js"></script>
	</head>
	<body ng-controller="myController">
		<h4>父作用域:{{message}}</h4>
		<input type="text" ng-model="message" />
		<h4>子作用域:</h4>
		<h4>scope={}时，子作用域和父作用域完全隔离</h4>
		<div my-directive></div>
		<h4>scope={"="}的时候，实现子作用域与父作用域的双向数据绑定</h4>
		<div my-directive1 message="message"></div>
		<h4>scope={"@"}时，实现子作用域和父作用域的单向数据绑定，
			<br/>父作用域值的改变会影响子作用域，子作用域不会影响父作用域</h4>
		<div my-directive2 message={{message}}></div>
		<script>
			var app = angular.module("myApp", []);
			app.controller("myController", function($scope){
				$scope.message = "father info"
			});
			app.directive("myDirective", function(){
				return {
					restrict: "A",
					scope: {
					},
					template: "<div ng-init=\"message='child info'\">child message:{{message}}<br /><input type='text' ng-model='message'/></div>"
				};
			});
			app.directive("myDirective1", function(){
				return {
					restrict: "A",
					template: "<div>child message:{{message}}<br /><input type='text' ng-model='message'/></div>",
					scope: {
						message: "="
					}
				}
			});
			app.directive("myDirective2", function(){
				return{
					retrict: "A",
					template: "<div>child message:{{message}}<br/><input type='text' ng-model='message'/></div>",
					scope: {
						message: "@"
					}
				}
			});
		</script>
	</body>
</html>
posted @ 2019-12-04 23:30  平手友梨奈ii  阅读(284)  评论(0)  编辑  收藏  举报