在 AngularJS 中的控制器之間共享資料
我們可以使用幾種方法在 AngularJS 中的控制器之間共享資料，但這裡我們只討論兩種方式。第一種方法是範圍變數。第二種方法是使用工廠或服務。
在 AngularJS 中的父子控制器之間共享資料
子控制器的作用域繼承父控制器的作用域，允許通過使用控制器繼承簡單地共享資料。
當子元件巢狀在父元件中時，子元件可以訪問父元件的資料。
這是通過使用雙向資料繫結來實現的。父元件可以使用屬性繫結或事件繫結將資料傳遞給子元件。
然後，子級可以使用其控制器上的屬性繫結或事件繫結將此資料傳遞迴父級。此模式還用於在相關元件之間共享選擇。
範圍物件
範圍物件是在例項化控制器時建立的，它包含模型和檢視屬性。
模型屬性儲存或儲存與其他控制器共享的任何資訊。另一方面，檢視屬性具有或儲存有關在螢幕上顯示此資訊的資訊（例如 HTML）。
在 AngularJS 中使用工廠或服務在控制器之間共享資料
在 AngularJS 中，我們可以使用工廠或服務在控制器之間共享資料。
工廠返回一個物件，其中包含建立和更新物件的方法。當我們想在一個控制器中建立一個新物件並與另一個控制器共享時，我們可以使用工廠。
當我們想要在控制器和其他 JavaScript 檔案之間共享資料時使用服務。
總之，AngularJS 工廠和服務是執行特定目的幷包含方法和屬性的 JS 模組。
它們可以通過依賴注入注入到其他元件中。我們可以在工廠中定義一個共享變數，將其注入兩個控制器，並在此方法中將作用域變數連結到工廠資料。
我們必須遵循以下步驟。
-
註冊工廠或服務。
-
建立一個負責獲取資料的服務或工廠。
-
將服務或工廠新增到模組的提供者列表中。
-
建立一個具有將使用該服務的函式的控制器。
下面是一個示例，可幫助我們瞭解如何使用上述兩種方式在控制器之間共享資料。
JavaScript 程式碼：
var myApp = angular.module('myApp', []);
myApp.service('demo', [function () {
'use strict';
this.pointtot = {hello: 'Adil'};
}]);
myApp.controller('Ctrl1', ['$scope', 'demo', function($scope, demo) {
$scope.myPointtot = demo.pointtot;
}]);
myApp.controller('Ctrl2', ['$scope', 'demo', function($scope, demo) {
$scope.yourPointtot = demo.pointtot;
}]);
HTML 程式碼：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Example of sharing data between controllers</h1>
<div ng-controller="Ctrl1">
<p>Write something in Controller 1 <input ng-model="myPointtot.hello" type="text" /></p>
</div>
<div ng-controller="Ctrl2">
<h4>Everything you write in controller 1, it will be copied to controller 2 and vice versa</h4>
<p>Write something in Controller 2 <input ng-model="yourPointtot.hello" type="text" /></p>
</div>
</body>
</html>
點選這裡檢視上面程式碼的演示。
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