AngularJS自定义指令–隔离范围教程
时间：2020-02-23 14:29:33 来源:igfitidea点击:
之前，我们研究了不同的指令属性，并使用这些属性创建了一个简单的指令。
在本教程中，我们将讨论如何使用"作用域"属性隔离指令的范围。
隔离范围
在AngularJS中，指令默认情况下可以直接访问其父级。
因此，我们只能在给定范围内使用一次。
如果要使其可重用，则必须将其与父作用域隔离。
我们可以使用指令的"作用域"属性来隔离范围。
这是一个棘手的话题，当您第一次看到它时可能看起来有些复杂，但这是angularJS的强大功能。
因此，我们将从基础知识开始，并在接下来的文章中探索所有高级功能。
为什么要隔离范围
在使用"作用域"属性之前，让我们看看如果不使用此属性会发生什么。
让我们创建名为myEmployee指令的指令以显示文本输入元素。
ng-model指令绑定在文本字段中输入并内联显示的值。
app.js
var app = angular.module('mainApp', []);
app.directive("myEmployee", function() {
return {
restrict: 'E',
template: '<br> <input type="text" ng-model="someText"> {{someText}}'
};
});
在下面的index.html文件中，我们使用了myEmployee指令来显示三个输入元素。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<my-employee></my-employee>
<my-employee></my-employee>
<my-employee></my-employee>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
您将在浏览器中看到以下输出，并在任何字段中输入一些数据。
您可以看到，即使我们更改单个字段，所有字段也会使用最新更改进行更新。
这是因为它们都共享相同的范围。
这就是为什么我们需要隔离每个指令的范围的原因。
隔离范围示例
我们可以通过向指令添加scope属性来隔离指令的范围。
现在，我们将一个空对象传递给scope属性以使其可重用。
在接下来的文章中，我们将看到" @"，"&"和" ="与" scope"属性的使用。
app.js
var app = angular.module('mainApp', []);
app.directive("myEmployee", function() {
return {
restrict: 'E',
scope:{}, //this will isolate the scope.
template: '<br> <input type="text" ng-model="someText"> {{someText}}'
};
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<my-employee></my-employee>
<my-employee></my-employee>
<my-employee></my-employee>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
在下面的字段中键入内容，您可以看到其中一个字段的更改不会影响其余字段。
