angularJs自定义指令的三种绑定策略

最新推荐文章于 2020-12-24 05:08:06 发布

狼牙冷

最新推荐文章于 2020-12-24 05:08:06 发布

阅读量3.9k

点赞数

分类专栏： JS angularJs 文章标签： angularJs 指令双向绑定绑定策略自定义指令

本文链接：https://blog.youkuaiyun.com/jimolangyaleng/article/details/53729254

版权

JS 同时被 2 个专栏收录

36 篇文章

订阅专栏

angularJs

13 篇文章

订阅专栏

本文介绍了AngularJS中指令的scope隔离域及其三种绑定策略：@符号用于绑定属性值，=符号实现双向数据绑定，&符号绑定父作用域中的函数。通过示例展示了如何在实际项目中应用这些绑定策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angularJs中指令scope隔离域中有3种绑定策略:

.directive("test",function(){
     return {
         scope:{                    
                title:"@",           
                name:"=",            
                changeName:"&"        
         }
  }
})

 
 出现了scope就表示这个指令的scope是独立的，但如果要与外界联系，就要使用绑定策略 

 
 使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即我们通过@得到title属性的值 

 
 使用=符号可将本地作用域上的属性与父级作用域上的属性进行双向绑定，即我们通过=得到name的引用。可以同值传递和引用传递的理解相结合 

 
 使用&符号可以对父级作用域进行绑定，以便在其中运行函数，简单说就是绑定函数用的 

实例：

HTML代码

<!doctype html>
<html ng-app="myApp">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="lib/angular/angular.js"></script>
  <script src="js/run.js"></script>
</head>
<body ng-controller='BodyController'>
  <div ng-controller='SomeController'>
  	{{someBareValue}}
  	<button ng-click='someAction()'>Communicate to child</button>
  	<div ng-controller='ChildController'>
  		{{someBareValue}}
  		<button ng-click='childAction'>Communicate to parent</button>
  	</div>
  </div>
  <input type="text" ng-model='user'/></br>
  <div scope-example user-data-name="user" on-send='sendMail(email)' from-name={{name}}></div>
</body>
</html>

JS代码（run.js）

angular.module("myApp",[])
	.controller("BodyController",function($scope,$timeout,$interval){
		$scope.name = "黄小明";
		$scope.user = "李四";
		var i=0;
		var timer = $interval(function(){
			i++;
			$scope.name = "黄大明";
			$scope.user = "李四" + i;
			
			if(i==4){
				$interval.cancel(timer);
			}
		},2000);

		$scope.sendMail = function(email){
			console.log(email)
			alert(email.email)
		}
	})
	.controller("SomeController",function($scope){
		$scope.someBareValue = "黄小明";
		$scope.someAction = function(){
			$scope.someBareValue = "你好呀黄大明";
		}
	})
	.controller("ChildController",function($scope){
		$scope.childAction = function(){
			$scope.someBareValue = "这是点击controller的孩子";
		}
	})
	.directive("scopeExample",function(){
		return {
			restrict: "EA",
			scope: {
				userDataName: "=userDataName",
				onSend: "&onSend",
				fromName: "@fromName"
			},
			template: '<div ng-click="test()">Now you should show email fromName={{fromname}}</div></br><input ng-model="userDataName"/></br><p>这是从父级获取到的{{userDataName}}</p>',
			link: function(scope, element, attrs) {
				// scope.userDataName = {
				// 	name: "李四"+i
				// };
			
				scope.fromname = scope.fromName;
				scope.test = function(){
					scope.onSend({"email":{"email":"251813997@qq.com"}});
				}

			}
		};
	});

运行结果图片如下: