angularjs双向绑定
Earlier we looked at AngularJS Isolate scope attribute binding and I hope you got a better idea about isolate scope and how to bind attribute using the same. This is a continuation of the isolate scope series of tutorials and today we are going to look at isolate scope two-way data binding using ” =.”
之前我们看过AngularJS隔离范围属性绑定 ,希望您对隔离范围以及如何使用该属性绑定属性有一个更好的了解。 这是隔离范围教程系列的延续,今天我们将使用“ =”来研究隔离范围双向数据绑定。
AngularJS隔离范围双向绑定指令 (AngularJS Isolate Scope Two-way Binding Directive)
The @ character works well for accessing a string value passed into a directive. However, it won’t keep changes made in the directive in-sync with the external or outer scope. You can use “=” character if you need to create a two-way binding between the outer scope and the directive’s isolate scope.
@字符可以很好地访问传递给指令的字符串值。 但是,它不会使在指令中所做的更改与外部或外部范围保持同步。 如果需要在外部作用域和指令的隔离作用域之间创建双向绑定,则可以使用“ =”字符。
We are going to explain this concept with a simple example in the following section.
在下一节中,我们将通过一个简单的示例来解释这个概念。
隔离范围“ =”示例 (Isolate Scope “=” Example)
The following example demonstrates a directive that uses the “=” to explain the two way binding.
下面的示例演示了一个使用“ =”说明双向绑定的指令。
- We have created a controller MainCtrl and attached ctrlRole equals Development to its scope. 我们创建了一个控制器MainCtrl,并将ctrlRole等于Development附加到其作用域。
- Then create a directive named myEmployee having a custom local scope property role within its isolate scope. 然后创建一个名为myEmployee的指令,该指令在其隔离范围内具有自定义的本地范围属性角色 。
app.js
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">'
};
});
The “=” character tells the directive that the object passed into the role property should be bound using a two-way binding. The “=” character make sure that if the external property value changes then the directive’s role property should automatically be updated and vice versa.
“ =”字符告诉指令,传递给角色属性的对象应使用双向绑定进行绑定。 “ =”字符确保如果外部属性值更改,则指令的角色属性应自动更新,反之亦然。
<!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>
You can now play with the output. A change in any of the fields automatically reflects in the other one or we can say that two-way binding is happening between them.
您现在可以使用输出了。 任何一个字段的更改都会自动反映在另一个字段中,或者我们可以说它们之间发生了双向绑定。
隔离范围“ = attr”示例 (Isolate Scope “=attr” Example)
You can also use “=attr” property instead of ‘=’ like we used @ and @attr in the previous post.
您也可以使用“ = attr ”属性代替“ =”,就像我们在上 一篇文章中使用@和@attr一样。
The following example uses “=attr” instead of “=”.
以下示例使用“ = attr”代替“ =” 。
app.js
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">'
};
});
You can see the change in this piece of code in the following HTML.
您可以在以下HTML中看到这段代码中的更改。
<div my-employee myrole="ctrlRole"></div>
.
We have used the myrole instead of role as the attribute name.
。
我们使用了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>
You will see the same output on your browser.
您将在浏览器中看到相同的输出。
That’s all for now and you will see more features in the coming posts.
到此为止,您将在接下来的文章中看到更多功能。
翻译自: https://www.journaldev.com/7572/angularjs-isolate-scope-two-way-binding-example
angularjs双向绑定