angularjs双向绑定_AngularJS隔离范围双向绑定示例

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

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

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双向绑定