您的位置：首页 > Web前端 > AngularJS

--@angularJS--独立作用域scope绑定策略之=符策略

2015-05-20 11:26 567 查看

1、index.html:

<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>scopeEqual</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular.js"></script>
</head>
<body>

<div ng-controller="myCtrl">
<label for="" class="control-label">控制器中的内容：</label>
<input type="text" ng-model="ctrlFlavor" />
<label for="" class="control-label">指令中的内容：</label>
<drink flavor="ctrlFlavor"></drink>
</div>
<script src="./scopeEqual.js"></script>
</body>
</html>

2、scopeEqual.js：

var myModule = angular.module("app",[]);

myModule.controller('myCtrl', ['$scope', function($scope){
$scope.ctrlFlavor = "百事达";
}]);
myModule.directive('drink',function(){
return {
restrict: 'AE',
scope:{
fla:'=flavor'//还是传递同标签内的属性值，就能形成双向数据绑定.在独立作用域中同样是ng-model中的值，要想形成双向ng-model数据绑定的赋值形式的话必须用=号赋属性值给ng-model才行.fla是ng-model值，标签属性flavor获取的是控制器中所赋的值
},
template: '<input type="text" ng-model="fla" />',
// link: function(scope, elm, attrs) {
// scope.fla = scope.ctrlFlavor;//这样写虽然能把控制器中的初始值赋给ng-model="fla"中的fla，但是与上一个input里面的ng-model="ctrlFlavor"形成不了双向数据绑定，就是你我均独立，互不干扰，互不影响，所以要实现双向数据绑定，还得借助于scope:里面的等号"="双向绑定机制
// }
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航