角度服務和範圍 - 爲什麼價值在其他範圍內變化？

需要幫助瞭解下面的代碼是如何工作的。角度服務和範圍 - 爲什麼價值在其他範圍內變化？

第一負載後在div元件以及所述輸入元件中顯示的值是「用戶名」，如所預期。

然而，爲什麼在第一div元素值獲得當我修改考慮到兩個控制器具有不同的和相互排斥的範圍變量??在輸入元素的值進行修改。

我相信這是與rootScope進行連接withed，但我不知道怎麼連點。

<html ng-app='myApp'> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script> 
 
    <script type="text/javascript"> 
 
     var app = angular.module('myApp', []); 
 
     app.factory('userService',['$timeout', function($timeout){ 
 
      var user = {} 
 
      
 
      $timeout(function(){ 
 
       
 
       user.name = 'Username'; 
 
      },5000); 
 
      
 
      return user; 
 
     }]) 
 
     app.controller('c1', ['$scope', 'userService', function($scope, userService){ 
 
      $scope.user = userService; 
 
    
 
     }]) 
 
     app.controller('c2', ['$scope', 'userService', function($scope, userService){ 
 
      $scope.user = userService; 
 
     }]) 
 
    </script> 
 
    <body> 
 
     <div ng-controller="c1"><h1>{{user.name}}</h1></div> 
 
     <div ng-controller="c2"><input type="text" ng-model="user.name"/></div> 
 
    </body> 
 
    
 
</html>

來源

2017-06-19 Raj

在angularJS，服務單。

而作爲FAS，你永遠不會更新用戶的參考，你總是與同一個對象的工作。

這個由多個組件共享的服務是共享數據的常見方式。

來源

2017-06-19 07:46:17

但是，當我修改輸入元素中的值時，爲什麼第一個div元素中的值會被修改？

因爲你只是用雙向這裏結合，這是確保你有兩個型動物2個型動物控制器作用域但是這兩個範圍變量$scope.user指向同一個服務價值userService所以在一個控制器發生變化會影響第二個。

換句話說兩個變量綁定到相同的服務是與使用一個電腦板。

這就是如何Data binding作品在角：

數據綁定在AngularJS應用是模型和視圖組件之間的數據的自動同步。 AngularJS實現數據綁定的方式可以讓您將模型視爲應用程序中的單一來源。該視圖始終是該模型的投影。模型更改時，視圖反映更改，反之亦然。

來源

2017-06-19 07:59:19

這是因爲您在兩個控制器中都指向相同的工廠對象userService。

你的工廠是一個單獨的對象即其唯一一次初始化。所以當你把它作爲你的控制器的依賴注入時，你實際上是在應用程序中與所有控制器共享相同的實例。

您的範圍變量$scope.user指的是您的控制器中的factory object。並且您已將user.name與ng-model綁定。

因此，它第一次顯示Username，因爲它的值爲$scope.user.name，或者說我應該說userService.name。所以當用戶輸入文本框userService.name時它實際綁定的是什麼，因爲$scope.user是指userService，因此它更新了userService.name，這反映在您的控制器c1中，它也指向工廠對象的相同實例。因此，這種行爲。

下面是一個相同的演示，可以幫助您瞭解更多。正如你所看到的，我已經創建了$scope.user作爲控制器c1中的新對象，因此它現在不會引用工廠對象，因此名稱也不會更新。但在控制器c2它將被更新。

<html ng-app='myApp'> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script> 
 
    <script type="text/javascript"> 
 
     var app = angular.module('myApp', []); 
 
     app.factory('userService',['$timeout', function($timeout){ 
 
      var user = {} 
 
      
 
      $timeout(function(){ 
 
       
 
       user.name = 'Username'; 
 
      },5000); 
 
      
 
      return user; 
 
     }]) 
 
     app.controller('c1', ['$scope', 'userService','$timeout', function($scope, userService,$timeout){ 
 
      $scope.user={}; 
 
      $timeout(function(){ 
 
       $scope.user.name = userService.name; 
 
      },5000); 
 
       
 
    
 
     }]) 
 
     app.controller('c2', ['$scope', 'userService', function($scope, userService){ 
 
      $scope.user = userService; 
 
     }]) 
 
    </script> 
 
    <body> 
 
     <div ng-controller="c1"><h1>{{user.name}}</h1></div> 
 
     <div ng-controller="c2"><input type="text" ng-model="user.name"/> 
 
     <span>{{user.name}}</span> 
 
     </div> 
 
    </body> 
 
    
 
</html>

Please read this for more info on services in angular

Official Documentation

希望它能幫助:)

來源

2017-06-19 08:04:36 Manish

角度服務和範圍 - 爲什麼價值在其他範圍內變化？

回答

相關問題