AngularJS隔离范围属性绑定教程
时间：2020-02-23 14:29:35 来源:igfitidea点击:
在上一教程中，我们已经讨论了隔离范围及其基本用法。
我们使用{}(对象哈希)来隔离范围，这在创建可重用组件时非常有用。
因此，它将不会继承或者修改父作用域中的数据。
由于隔离作用域采用对象哈希，因此我们可以定义一组局部属性。
这些属性对于模板的别名值很有用。
@或者@attr –将本地范围属性绑定到DOM属性的值。
" ="或者" = attr" –在本地范围属性和通过attr属性的值定义的名称的父范围属性之间建立双向绑定。
"&"或者"&attr" –提供了一种在父作用域的上下文中执行表达式的方法。
在本教程中，我们将通过一个示例讨论隔离范围属性绑定。
隔离范围属性
" @"或者" @attr"用于将本地"作用域"属性绑定到DOM属性的值。
我们将通过一个示例详细讨论此属性。
让我们创建一个指令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;
}
};
});
我们在以下HTML代码中使用了myEmployee指令，并将字符串值传递给role属性
<div ng-app="mainApp">
<my-employee role="development"></my-employee>
</div>
您将在浏览器中看到以下输出。
使用隔离范围" @"
通过使用隔离范围'@'属性来绑定role属性的值，可以摆脱上面示例中的link函数。
您可以简单地使用以下语法将" scope"属性绑定到属性值。
scope:{
attribute:"@"
}
下面的示例演示隔离范围属性绑定。
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>
您将在浏览器中看到相同的输出。
使用隔离范围" @attr"
您还可以使用@ 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>
