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