directive scope 绑定策略

最新推荐文章于 2020-05-24 01:25:26 发布

churanlu1875

最新推荐文章于 2020-05-24 01:25:26 发布

阅读量100

点赞数

原文链接：https://my.oschina.net/u/3427060/blog/1523502

版权

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

<body>
		<div ng-controller="MyCtrl">
			<drink flavor="{{ctrlFlavor}}"></drink>
		</div>
</body>

运行

指令drink中有一个flavor属性，其上一层的div中的scope有一个ctrlFlavor属性，上面的例子就是讲上层div中scope的值绑定在下层指令drink的flavor属性上。

自：就是flavor="{{ctrlFlavor}}" 就把flavor被赋值了，值是ctrlFlavor

<div ng-controller="myController">  
   <div class="result">  
       <div>父scope：  
           <div>Say：{{name}}<br>改变父scope的name：<input type="text" value="" ng-model="name"/></div>  
       </div>  
       <div>隔离scope：  
           <div isolated-directive name="{{name}}"></div>  
       </div>  
        <div>隔离scope（不使用父scope {{name}}）：  
             <div isolated-directive name="name"></div>  
         </div>  
   </div>  
</body>  
<script type="text/javascript">  
var app = angular.module('myApp', []);  
 app.controller("myController", function ($scope) {  
        $scope.name = "hello world";  
    }).directive("isolatedDirective", function () {  
        return {  
            scope: {  
                name: "@"  
            },  
            template: 'Say：{{name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">'  
        };  
});  
</script>  
</html>

自:这就说明了：这种绑定是单向的，即父 scope 的绑定变化，directive 中的 scope 的属性会同步变化，而隔离 scope 中的绑定变化，父 scope 是不知道的

= @差不多，不同的是绑死了，双向的，相同的是都是通过属性

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

<body>
		<div ng-controller="MyCtrl">
			Ctrl:
			<br>
			<input type="text" ng-model="ctrlFlavor">
			<br>
			Directive:
			<br>
			<drink flavor="ctrlFlavor"></drink>
		</div>
	</body>

说明：给@差不多，不同的是绑死了，双向的

<div ng-controller="myController">  
    <div>父scope：  
        <div>Say：{{user.name}}<br>改变父scope的name：<input type="text" value="" ng-model="userBase.name"/></div>  
    </div>  
    <div>隔离scope：  
        <div isolated-directive user="userBase"></div>  
    </div>  
</div>  
</body>  
<script type="text/javascript">  
var app = angular.module('myApp', []);  
 app.controller("myController", function ($scope) {  
        $scope.userBase = {  
            name: 'hello',  
            id: 1  
        };  
    }).directive("isolatedDirective", function () {  
        return {  
            scope: {  
                user: "="  
            },  
            template: 'Say：{{user.name}} <br>改变隔离scope的name：<input type="buttom" value="" ng-model="user.name"/>'  
        }  
    })  
</script>

说明了这种绑定的深度，及第一个Say：{{user.name}}没起到作用。

& 局部 scope 属性

& 方式提供一种途经是 directive 能在父 scope 的上下文中执行一个表达式。此表达式可以是一个 function。
比如当你写了一个 directive，当用户点击按钮时，directive 想要通知 controller，controller 无法知道 directive 中发生了什么，也许你可以通过使用 angular 中的 event 广播来做到，但是必须要在 controller 中增加一个事件监听方法。
最好的方法就是让 directive 可以通过一个父 scope 中的 function，当 directive 中有什么动作需要更新到父 scope 中的时候，可以在父 scope 上下文中执行一段代码或者一个函数。

如下示例在 directive 中执行父 scope 的 function。

<body>  
 <div  ng-controller="myController">  
        <div>父scope：  
            <div>Say：{{value}}</div>  
        </div>  
        <div>隔离scope：  
            <div isolated-directive action="click()"></div>  
        </div>  
</div>  
</body>  
<script type="text/javascript">  
var app = angular.module('myApp', []);  
 app.controller("myController", function ($scope) {  
        $scope.value = "hello world";  
        $scope.click = function () {  
            $scope.value = Math.random();  
        };  
    }).directive("isolatedDirective", function () {  
        return {  
            scope: {  
                action: "&"  
            },  
            template: '<input type="button" value="在directive中执行父scope定义的方法" ng-click="action()"/>'  
        }  
    })  
</script>

自;属性变成了一个方法，directive 通过传参及函数改变controller里的值，

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
	$scope.sayHello=function(name){
		alert("Hello "+name);
        debugger;
        console.log(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/>'
    }
});

<body>
		<div ng-controller="MyCtrl">
			<greeting greet="sayHello(name)"></greeting>
			<greeting greet="sayHello(name)"></greeting>
			<greeting greet="sayHello(name)"></greeting>
		</div>
	</body>

运行

还有scope是return里面的不是link里面的：

当为false时候，儿子继承父亲的值，改变父亲的值，儿子的值也随之变化，反之亦如此。（继承不隔离）

当为true时候，儿子继承父亲的值，改变父亲的值，儿子的值随之变化，但是改变儿子的值，父亲的值不变。（继承隔离）改变父子动，子改父不动，再改父子不动

当为{}时候，没有继承父亲的值，所以儿子的值为空，改变任何一方的值均不能影响另一方的值。（不继承隔离）

false: 双向改变

<!DOCTYPE html>  
<html lang="zh" ng-app="myApp">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS入门学习</title>  
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
</head>  
<body>  
<div ng-controller='MainController'>  
        父亲:{{name}}<input ng-model="name" />  
        <div my-directive></div>  
  </div>  
</body>  
<script type="text/javascript">  
var app = angular.module('myApp', []);  
app.controller('MainController', function ($scope) {  
           $scope.name = '林炳文';  
});  
app.directive('myDirective', function () {  
            return {  
                restrict: 'EA',  
                scope:false,  
                template: '<div>儿子:{{ name }}<input ng-model="name"/></div>'  
            };  
});  
</script>  
</html>

参考http://blog.csdn.net/evankaka/article/details/51232895

及慕课网

转载于:https://my.oschina.net/u/3427060/blog/1523502

churanlu1875

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
directive scope 绑定策略

@ var myModule = angular.module("MyModule", []);myModule.controller('MyCtrl', ['$scope', function($scope){ $scope.ctrlFlavor="百威";}])myModule....
复制链接

扫一扫