指令中实现与外层组件进行数据交互大概有这几种方式：
* 和父级作用域共用一个scope（双向绑定/双向传递）
* 继承父级作用域的scope（单向绑定/单向传递）
* 通过事件监听来进行传递数据（/单向传递）
* 通过指令中link函数中attr进行获取父级数据（单向传递）
* 通过指令中scope:{ }中@进行获取父级数据（单向传递）
* 通过指令中scope:{ }中“=”进行传递数据（双向绑定）
* 通过$scope.$watch()进行数据监听进行数据传递（单向绑定）
* 通过$scope.$observe()进行数据监听进行数据传递（单向绑定）
* 指令通过require:'ngModel'进行数据传递（双向绑定）
通过下面例子来解释一下<p>
通过指令中<code>scope:{ }</code>中“=”进行传递数据（双向绑定）
先放代码，然后解释
<body ng-controller="myCon"> <div ng-repeat="option in data">
<h3>{{option.tittle}}</h3>
<h2>{{option.content}}</h2>
<em-text data="option.content"></em-text>
</div></body>var app=angular.module("interpolateApp",["template"])
.controller("myCon",["$scope", function ($scope) {
$scope.data=[{ tittle:"one", content:"123"
},{ tittle:"two", content:"444"
},{ tittle:"three", content:"555"
}]
}])
.directive("emText", function () { return{ restrict:'E', templateUrl:'test.html', replace:true, scope:{ data:'='
}, link: function (scope, element, attrs) { //var num=parseInt(attrs.data);
var num=scope.data; /*console.log(num);*/
if(num>500){
scope.isActive=true
}else{
scope.isActive=false;
}
}
}
})var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("test.html","<div>" + "<span ng-class=\"{true:'active', false:'unActive'}[isActive]\"><input type='text' ng-model='data'/> </span>" + "</div>")
}])这是通过在scope中设置使用场景‘=’来进行数据交互的。其中‘=’的含义是通过与父scope中的属性进行双向绑定。在上例子中即为data属性的值，与指令模板中的ng-model的值进行双向交互。<p>
上面的例子稍加变形就能实现：通过指令中link函数中attr进行获取父级数据（单向传递）
通过指令中link函数中attr进行获取父级数据（单向传递）
代码如下：
<body ng-controller="myCon"> <div ng-repeat="option in data">
<h3>{{option.tittle}}</h3>
<h3>{{option.content}}</h3>
<em-text data="{{option.content}}"></em-text>
</div></body><script> var app=angular.module("interpolateApp",["template"])
.controller("myCon",["$scope", function ($scope) {
$scope.data=[{ tittle:"one", content:123
},{ tittle:"two", content:544
},{ tittle:"three", content:455
}]
}])
.directive("emText", function () { return{ restrict:'EA', templateUrl:'test.html', replace:true, link: function (scope, element, attrs) { var num=attrs.data; console.log(num); if(num>500){
scope.isActive=true
}else{
scope.isActive=false;
}
scope.data=num;
}
}
}) var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("test.html","<div>" + "<span ng-class=\"{true:'active', false:'unActive'}[isActive]\">{{data}}</span>" + "</div>")
}])
</script>案例1和案例2主要有以下几点不同：
<ul>
<li>在html中案例1采用的是data=“option.content”的写法，而案例2采用的是data=“{{option.content}}”这样的写法，因为这是因为案例1是采用scope中‘=’的使用场景，其底层实现原理是<code>$scope.$watch()</code>，<code>$scope.$watch()</code>是实现双向绑定的基础函数，用来监听值的变化，所以不需要写<code>{{}}</code>，但是案例2中是采用通过link函数的attrs来获取属性的值，需要<code>data=“{{option.content}}”</code>首先获取model的中值，然后在传递到<code>link</code>函数中，所以需要写<code>$scope.$watch()</code><li>
<li>通过属性集合<code>attrs</code>来获取其中一个的值。</li>
</ul>
通过指令中scope:{ }中@进行获取父级数据（单向传递）
<!DOCTYPE html><html lang="en" ng-app="connectApp"><head>
<meta charset="UTF-8">
<title></title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/angular.min.js" type="text/javascript"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/angular-animate.js" type="text/javascript"></script>
<style>
.active{ color:red
} .unActive{ color:blue
} </style></head><body ng-controller="myCon">
<div ng-repeat="option in data">
<h3>{{option.tittle}}</h3>
<h1>{{option.content}}</h1>
<em-text data="{{option.content}}"></em-text>
</div></body><script>
var app=angular.module("connectApp",["template"])
.controller("myCon",["$scope", function ($scope) {
$scope.test=1;
$scope.data=[{
tittle:"one",
content:123
},{
tittle:"two",
content:544
},{
tittle:"three",
content:455
}]
}])
.directive("emText", function () { return{
restrict:'EA',
replace:true,
templateUrl:"one.html",
scope:{
data:"@"
},
link: function (scope, element, attr) { if(attr.data>300){
scope.isActive=true
}else{
scope.isActive=false;
}
}
}
}) var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put('one.html',"" + "<div ng-model=\"data\" ng-class=\"{true:'active', false:'unActive'}[isActive]\">{{data}}</div>")
}])</script></html>在这个案例中使用的是<code>scope{data:"@"}</code>来实现指令与外界进行通信的，此时使用<code>@</code>传递的是字符串而不是对象。即使用当前指令中的template子级scope作用域相同的名称的值，等于父级作用域中和属性名称相同的值。
继承父级作用域的scope（单向绑定/单向传递）
下面是例子
<!DOCTYPE html><html lang="en" ng-app="connectApp"><head>
<meta charset="UTF-8">
<title></title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="lib/angular.min.js" type="text/javascript"></script>
<style>
.active{ color:red
} .unActive{ color:blue
} </style></head><body ng-controller="myCon"><div ng-repeat="option in data">
<h3>{{option.tittle}}</h3>
<h1>{{option.content}}</h1>
<em-text data="{{option.content}}"></em-text></div></body><script>
var app=angular.module("connectApp",["template"])
.controller("myCon",["$scope", function ($scope) {
$scope.data=[
{
tittle:"one",
content:123
},
{
tittle:"two",
content:111
},
{
tittle:"three",
content:444
}
]
}])
.directive('emText', function () { return{
restrict:'EA',
scope:true,
templateUrl:"one.html",
link: function (scope, element, attr) {
}
}
}) var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("one.html","" + "<div da=\"data\" ng-class=\"{true:'active',false:'unActive'}[isActive]\">{{data}}</div>")
}])</script></html>如果要创建一个能够从外部原型继承作用域的指令，将scope值设置为true，简单来说就是实现可隔离的继承，即子作用域不能影响父作用域。
作者：MakingChoice
链接：https://www.jianshu.com/p/50d78a1459ac
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦