2016-06-27 25 views
1

我在模板中有兩個控制器。我使用服務在他們之間傳遞數據。但是,使用文本框更新模型值時,僅在使用第一個控制器的第一個div上刷新(雙向)文本。如何刷新第二個控制器中的數據

如何獲得的第二個div數據刷新

  1. 不使用watchng-change
  2. 對於使用看

參考

  1. Using ng-change instead of $watch in Angular

<html> 
 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"> 
 
    </script> 
 
</head> 
 
<body ng-app="myApp"> 
 
    <div class="container" style="padding-top: 20px;"> 
 
     <div ng-controller="myController"> 
 
\t <input type="text" ng-model="valueA"> 
 
\t <p>From First: {{valueA}}</p> 
 
     </div> 
 
    </div> 
 
    <div class="container" style="padding-top: 20px;"> 
 
     <div ng-controller="mySECONDController"> 
 
      <p>From Second: {{valueB}}</p> 
 
     </div> 
 
    </div> 
 
    <script> 
 

 
     //defining module 
 
     var app = angular.module('myApp', []); 
 

 
     //defining service 
 
     app.service('myService', function() { 
 
      this.name = ''; 
 
      this.setName = function (newName) 
 
\t  { 
 
       this.name = newName; 
 
      }; 
 
\t  this.getName = function() 
 
\t  { 
 
       return this.name; 
 
      }; 
 
     } 
 
\t); 
 
     
 

 

 
     //defining controller 
 
     app.controller('myController', function ($scope, myService) { 
 
      
 
\t  myService.setName("Lijo"); 
 
\t  $scope.valueA = myService.getName(); 
 
      
 
     }); 
 

 
\t //defining controller 
 
     app.controller('mySECONDController', function ($scope, myService) { 
 
      
 
\t  $scope.valueB = myService.getName(); 
 
      
 
     }); 
 
\t 
 

 

 
    </script> 
 
</body> 
 
</html>

+0

參考文獻:[AngularJS - 控制器之間共享數據(http://excellencenodejsblog.com/angularjs-sharing-data-between-controller/) – Lijo

回答

1

你可以做的是值設置爲服務於第一控制器和第二個使用該服務得到它。因此,它總是會接受存儲在服務中的值。

<html> 
 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"> 
 
    </script> 
 
</head> 
 
<body ng-app="myApp"> 
 
    <div class="container" style="padding-top: 20px;"> 
 
     <div ng-controller="myController"> 
 
\t <input type="text" ng-model="valueA" ng-change="myService.setName(valueA)"> 
 
\t <p>From First: {{myService.getName()}}</p> 
 
     </div> 
 
    </div> 
 
    <div class="container" style="padding-top: 20px;"> 
 
     <div ng-controller="mySECONDController"> 
 
      <p>From Second: {{myService.getName()}}</p> 
 
     </div> 
 
    </div> 
 
    <script> 
 

 
     //defining module 
 
     var app = angular.module('myApp', []); 
 

 
     //defining service 
 
     app.service('myService', function() { 
 
      this.name = ''; 
 
      this.setName = function (newName) 
 
\t  { 
 
       this.name = newName; 
 
      }; 
 
\t  this.getName = function() 
 
\t  { 
 
       return this.name; 
 
      }; 
 
     } 
 
\t); 
 
     
 

 

 
     //defining controller 
 
     app.controller('myController', function ($scope, myService) { 
 
      myService.setName("Lijo"); 
 

 
      $scope.myService= myService; 
 
\t  $scope.valueA = myService.getName(); 
 
     }); 
 

 
\t //defining controller 
 
     app.controller('mySECONDController', function ($scope, myService) {  
 
\t  $scope.myService= myService; 
 
     }); 
 
\t 
 

 

 
    </script> 
 
</body> 
 
</html>

相關問題