AngularJS 中的自定义指令范围
- AngularJS 中的自定义指令范围
-
在 AngularJS 中使用
Scope: False或 Shared Scope -
在 AngularJS 中使用
Scope: True或派生作用域 -
在 AngularJS 中使用
Scope : {}或独立作用域 -
在 AngularJS 中使用
@或单向绑定 -
在 AngularJS 中使用
=或双向绑定 -
在 AngularJS 中使用
&或方法绑定
范围允许 AngularJS 确保另一个对象不会意外更改一个对象。它通过创建对象的新副本并将其存储在内存中来做到这一点。
范围还用作安全措施，防止未经授权的用户访问页面上的对象。本文将介绍不同的范围相关选项和策略，例如使用共享范围、继承父作用域和隔离范围。
AngularJS 中的自定义指令范围
AngularJS 作用域是 AngularJS 中的基本概念之一。范围用于确定特定变量和函数的可见性。
让我们谈谈方向；如果我们想要一个应用程序中的一个独特的功能，并想在整个应用程序部分使用它，我们必须编写一个代码集。它在 Angular 中被称为指令。
范围与所有指令相关联。此范围用于访问模板中的数据和方法。
除非特别设置，否则指令默认情况下不会建立其范围。因此，指令将其父级的范围视为自己的。
通过将定义为指令定义对象的配置对象提供给 AngularJS，我们可以更改指令的默认范围。让我们深入探讨这个话题。
在 AngularJS 中使用 Scope: False 或 Shared Scope
它生成与其父作用域相同的单个范围，这意味着对父作用域的任何更改都将反映在指令的范围中，反之亦然。
JavaScript：
var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
return {
scope: false,
template: "<div>Name : {{name}}</div>"+
"Write your Name : <input type='text' ng-model='name' />"
};
});
app.controller("Hello",function($scope){
$scope.name = "Adil";
$scope.reverseName = function(){
$scope.name = $scope.name.split('').reverse().join('');
};
});
HTML 代码：
<div ng-app="Demo">
<div ng-controller="Hello">
<h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
<div my-directive class='directive'></div>
</div>
</div>
在此示例中，当我们更改文本框的名称时，标题名称也会更改。该指令使用其父作用域，因为 DDO 未将其包含在此处。
因此，我们在指令中所做的任何更改也适用于父作用域。单击此处检查上述代码的工作情况。
在 AngularJS 中使用 Scope: True 或派生作用域
它是派生作用域而不是父作用域。如果你修改指令范围，更改将不会反映在控制器范围中。
但是，对父作用域的修改将反映在指令范围中。
JavaScript 代码：
var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
return {
scope: true,
template: "<div>Name : {{name}}</div>"+
"Write your Name : <input type='text' ng-model='name' />"
};
});
app.controller("Hello",function($scope){
$scope.name = "Adil";
$scope.reverseName = function(){
$scope.name = $scope.name.split('').reverse().join('');
};
});
HTML 代码：
<div ng-app="Demo">
<div ng-controller="Hello">
<h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
<div my-directive class='directive'></div>
</div>
</div>
在此示例中，父作用域的值将显示在屏幕上。但是如果我们修改文本框中的值会发生什么？
然后只会更改子作用域。它表明父作用域保持不变。
单击此处检查上述代码的工作情况。
在 AngularJS 中使用 Scope : {} 或独立作用域
孤立的范围是最重要的方面之一。该指令会在此处构造一个新的作用域对象，但不会继承父作用域；因此，它不会知道父作用域。
但是，我们如何从中检索数据，如果我们不与父作用域连接，我们如何编辑它？答案是将实体的属性放在 DDO 中；但是，你需要先在指令中设置属性。
我们在隔离范围内使用三个前缀来帮助将控制器的属性或方法链接到指令。让我们看看这是如何工作的。
当指令在 DDO 中发现其范围属性中的任何前缀时，它会在使用声明的属性调用指令的 HTML 页面的指令声明中仔细检查它们。
在任何前缀之后，我们可以给出不同的属性名称来更改名称。
AngularJS 有三种类型的前缀。
@- 单向绑定=- 直接模型绑定/双向绑定&- 方法绑定
在 AngularJS 中使用 @ 或单向绑定
单向绑定意味着当父级通过指令中反映的属性将某些内容发送到指令范围时。但是，对指令的任何更改都不会反映在父级中。
字符串值使用 @ 符号传递。
JavaScript 代码：
var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
return {
scope: {
name: '@'
},
template: "<div>Name : {{name}}</div>"+
"Write your Name : <input type='text' ng-model='name' />"
};
});
app.controller("Hello",function($scope){
$scope.name = "Adil";
$scope.reverseName = function(){
$scope.name = $scope.name.split('').reverse().join('');
};
});
HTML 代码：
<div ng-app="Demo">
<div ng-controller="Hello">
<div my-directive class='directive'></div>
</div>
</div>
<div ng-app="Demo"></div>
点击这里查看上面代码的演示。
在 AngularJS 中使用 = 或双向绑定
它用于将对象传递给指令而不是字符串。该实体可以从父方和指令方进行修改。
这就是为什么它被称为双向。要使用双向绑定，你需要在作用域的位置放置 = 符号。
scope: {
name: "="
}
在 AngularJS 中使用 & 或方法绑定
它用于将任何父级的方法连接到指令范围。每当我们调用指令的父方法时，我们都可以使用它。
它用于调用当前不在范围内的函数。要使用方法绑定，你需要将& 符号放在作用域的位置。
scope: {
name: "&"
}
就是这样;如果你仍然感到困惑，请通过单击此处阅读官方文档。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook