如何更新控制器中定義的變量作爲語法？

以下是我試圖代碼：如何更新控制器中定義的變量作爲語法？

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

 
var appCtrl = app.controller('AppCtrl', AppCtrl); 
 

 
function AppCtrl(){ 
 
    var appCtrl = this; 
 
    appCtrl.variable = "search"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app = "app"> 
 
    <div ng-controller = "AppCtrl as ctrl1"> 
 
    {{ctrl1.variable}} 
 
    </div> 
 
    <div ng-controller = "AppCtrl as ctrl2"> 
 
    <input type="search" ng-model = "ctrl2.variable"/> 
 
    {{ctrl2.variable}} 
 
    </div> 
 
</div>

當我更新ctrl2.variable，但ctrl1.variable不更新。

如何在不使用$scope的情況下更新？

來源

2017-01-19 Pritam Banerjee

可以幫助您http://stackoverflow.com/questions/15170464/i-have-two-divs-with-the-same-ng-controller-in-angularjs-how-can-i-make- them-sh –

這就是'controllerAs'語法的所有要點 - 以防範作用域影子。 –

我可以在不使用$scope.$watch的情況下找到最簡單的解決方案，它具有共享狀態，如下所示。

基本上兩個控制器都具有相同的對象引用，並且觀察到對該值的任何更改。

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

 
app.factory('SharedState', SharedState); 
 

 
function SharedState(){ 
 
    var shared = this; 
 
    state = {variable: "search"}; 
 
    
 
    shared.getState = function() { 
 
    return state; 
 
    } 
 
    
 
    return shared; 
 
} 
 

 
app.controller('AppCtrl', AppCtrl); 
 

 
function AppCtrl(SharedState){ 
 
    var appCtrl = this; 
 
    appCtrl.sharedState = SharedState.getState(); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app = "app"> 
 
    <div ng-controller = "AppCtrl as ctrl1"> 
 
    {{ctrl1.sharedState.variable}} 
 
    </div> 
 
    <div ng-controller = "AppCtrl as ctrl2"> 
 
    <input type="search" ng-model = "ctrl2.sharedState.variable"/> 
 
    {{ctrl2.sharedState.variable}} 
 
    </div> 
 
</div>

來源

2017-01-19 08:48:49 adricadar

是啊！其實我只是用'服務'做到了。但是這個答案也適用。也會發布我的。 –

Adricadar的回答是完全正常的。

但我只是想後，我寫了一個：

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

 
var appCtrl = app.controller('AppCtrl', AppCtrl); 
 

 
appCtrl.$inject = ['ShareDataService']; 
 

 
function AppCtrl(ShareDataService){ 
 
    var appCtrl = this; 
 
    appCtrl.variable = "search"; 
 
    
 
    appCtrl.setSearchQuery = function() {  
 
     ShareDataService.setSearchQuery(appCtrl.variable); 
 
    } 
 
     
 
\t appCtrl.getSearchQuery = function() {  
 
     return ShareDataService.getSearchQuery(); 
 
    } \t 
 
    
 
} 
 

 
var sharedDataService = app.service('ShareDataService',ShareData); 
 

 
function ShareData(){ 
 
    var shareDataService = this; 
 
    
 
    shareDataService.searchQuery = ""; 
 
\t \t 
 
    shareDataService.getSearchQuery = function(){ 
 
\t return shareDataService.searchQuery; 
 
    } 
 
\t \t 
 
    shareDataService.setSearchQuery = function(searchQuery){ 
 
\t shareDataService.searchQuery = searchQuery; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app = "app"> 
 
    <div ng-controller = "AppCtrl as ctrl1"> 
 
    {{ctrl1.getSearchQuery()}} 
 
    </div> 
 
    <div ng-controller = "AppCtrl as ctrl2"> 
 
    <input type="search" ng-model = "ctrl2.variable" ng-change="ctrl2.setSearchQuery()"/> 
 
    {{ctrl2.variable}} 
 
    </div> 
 
</div>

的邏輯是：

服務是Singleton對象。只有一個實例被創建。
添加了setter和getter方法。

來源

2017-01-22 10:08:25

如何更新控制器中定義的變量作爲語法？

回答

相關問題