angularjs绑定属性_AngularJS隔离范围属性绑定教程

angularjs绑定属性

We have discussed about the isolate scope and its basic usage in the previous tutorial. We used {} (object hash) to isolate the scope and it is useful when creating reusable components. Therefore, it will not inherit or modify the data in the parent scope.

在上一教程中，我们已经讨论了隔离范围及其基本用法。我们使用{}（对象哈希）来隔离范围，这在创建可重用组件时非常有用。因此，它将不会继承或修改父作用域中的数据。

Since isolate scope takes an object hash, we can define a set of local properties. These properties are useful for aliasing values for templates.

由于隔离作用域采用对象哈希，因此我们可以定义一组局部属性。这些属性对于别名为模板的值很有用。

@ or @attr – bind a local scope property to the value of DOM attribute.@或@attr –将本地范围属性绑定到DOM属性的值。
= or =attr – set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute.=或=attr –在本地范围属性和通过attr属性的值定义的名称的父范围属性之间建立双向绑定。
& or &attr – provides a way to execute an expression in the context of the parent scope.&或&attr –提供一种在父作用域的上下文中执行表达式的方法。

In this tutorial, we will be discussing about the isolate scope attribute binding with an example.

在本教程中，我们将通过一个示例讨论隔离范围属性绑定。

隔离范围属性 (Isolate Scope Attribute)

The @ or @attr is used to bind a local scope property to the value of DOM attribute. We are going to discuss this property in detail with an example.

@或@attr用于将本地scope属性绑定到DOM属性的值。我们将通过一个示例详细讨论此属性。

Let’s create a directive myEmployee to display the role of an employee and isolate the scope with an empty object. We are not using the '@' property in the following example. We have used a link function to set the scope property to the value of the attribute role in the example.

让我们创建一个指令myEmployee，以显示雇员的角色并用空对象隔离作用域。在以下示例中，我们不使用'@'属性。在示例中，我们使用link函数将scope属性设置为attribute 角色的值。

var app = angular.module('mainApp', []);app.directive("myEmployee", function() {return {restrict: 'E',scope:{},template: '<h3> Employee Role : {{role}} </h3>',link: function(scope,element,attrs){scope.role = attrs.role;}};
});

We have used the myEmployee directive in the following HTML code and passed a string value to the role attribute

我们在以下HTML代码中使用了myEmployee指令，并将字符串值传递给role属性

<div ng-app="mainApp"><my-employee role="development"></my-employee></div>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

使用隔离范围'@' (Using Isolate Scope ‘@’)

We can get rid of the link function in the above example by using isolate scope '@' property to bind the value of the role attribute.

我们可以通过使用隔离范围'@'属性绑定角色属性的值来摆脱上述示例中的链接函数。

You can bind the scope property to the attribute value simply by using the following syntax.

您可以使用以下语法简单地将scope属性绑定到属性值。

scope:{attribute:"@"
}

The following example demonstrates the Isolate scope attribute binding.

下面的示例演示隔离范围属性绑定。

var app = angular.module('mainApp', []);app.directive("myEmployee", function() {return {restrict: 'E',scope:{role:"@"},template: '<h3> Employee Role : {{role}} </h3>'};
});

<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>AngularJS Isolate Scope</title></head><body><div ng-app="mainApp"><my-employee role="development"></my-employee></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 in your browser.

您将在浏览器中看到相同的输出。

使用隔离范围'@attr' (Using Isolate Scope ‘@attr’)

You can also use @attr property instead of '@' so that you can differentiate the scope properties and attributes by their names. The following example demonstrates this usage and you will see the same output on your browser.
We have set the attribute name of myEmployee directive to myrole. By using @attr, the value of myrole attribute will set to the scope property.

您也可以使用@attr属性而不是'@'以便您可以通过名称区分作用域属性和属性。下面的示例演示了这种用法，您将在浏览器中看到相同的输出。
我们已经将myEmployee指令的属性名称设置为myrole 。通过使用@attr ， myrole属性的值将设置为scope属性。

var app = angular.module('mainApp', []);app.directive("myEmployee", function() {return {restrict: 'E',scope:{role:"@myrole"},template: '<h3> Employee Role : {{role}} </h3>'};
});

<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>AngularJS Isolate Scope</title></head><body><div ng-app="mainApp"><my-employee myrole="development"></my-employee></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>

That’s all for now and we will see more isolate scope features in the coming posts.

到此为止，我们将在接下来的文章中看到更多的隔离范围功能。

翻译自: https://www.journaldev.com/7568/angularjs-isolate-scope-attribute-bindingtutorial-example

angularjs绑定属性