AngularJS隔离范围双向绑定示例
时间：2020-02-23 14:29:36 来源:igfitidea点击:
之前我们看过AngularJS隔离范围属性绑定，希望您对隔离范围以及如何使用该属性绑定属性有一个更好的了解。
这是隔离范围教程系列的延续，今天我们将使用" ="来研究隔离范围双向数据绑定。
AngularJS隔离范围双向绑定指令
@字符可以很好地访问传递给指令的字符串值。
但是，它不会使指令中所做的更改与外部或者外部范围保持同步。
如果需要在外部作用域和指令的隔离作用域之间创建双向绑定，则可以使用" ="字符。
在下一节中，我们将通过一个简单的示例来解释这个概念。
隔离范围" ="示例
下面的示例演示了一个指令，该指令使用" ="解释双向绑定。
我们创建了一个控制器MainCtrl，并将ctrlRole等于Development附加到其作用域。
然后创建一个名为myEmployee的指令，在其隔离范围内具有自定义的本地范围属性角色。
app.js
var app = angular.module('mainApp', []);
app.controller("MainCtrl", function($scope){
$scope.ctrlRole = "Development"
});
app.directive("myEmployee", function() {
return {
scope:
{
role:"="
},
template: 'From Directive : <input type="text" ng-model="role">'
};
});
" ="字符告诉指令，传递给角色属性的对象应使用双向绑定进行绑定。
" ="字符可确保如果外部属性值更改，则该指令的角色属性应自动更新，反之亦然。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="MainCtrl">
<div> From Controller : <input type="text" ng-model="ctrlRole"></div><br>
<div my-employee role="ctrlRole"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
您现在可以使用输出了。
任何一个字段的更改都会自动反映在另一个字段中，或者我们可以说它们之间发生了双向绑定。
隔离范围" = attr"示例
您也可以使用" = attr"属性代替" ="，就像我们在上一篇文章中使用@和@attr一样。
以下示例使用" = attr"代替" ="。
app.js
var app = angular.module('mainApp', []);
app.controller("MainCtrl", function($scope){
$scope.ctrlRole = "Development"
});
app.directive("myEmployee", function() {
return {
scope:
{
role:"=myrole"
},
template: 'From Directive : <input type="text" ng-model="role">'
};
});
您可以在以下HTML中看到这段代码中的更改。
<div my-employee myrole="ctrlRole"></div>
。
我们使用了myrole而不是角色作为属性名称。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<div ng-controller="MainCtrl">
<div> From Controller : <input type="text" ng-model="ctrlRole"></div><br>
<div my-employee myrole="ctrlRole"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
