在示例中共享控制器中的數據 - AngularJs

使簡單的程序能夠共享作爲輸入的數據，並在其他通過自定義服務進行更新。我正在編寫一些我可以使用的代碼，但需要幫助才能使它適用於兩個控制器。有人可以幫忙嗎？在示例中共享控制器中的數據 - AngularJs

片段：

<html> 

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
</head> 

<body ng-app="myApp"> 

<div class="div1" ng-controller="myCtrl1"> 
    <input type="text" ng-model="name"> <span>{{name}}</span> 
</div> 

<div class="div2" ng-controller="myCtrl2"> 
    <span>{{name}}</span> 
</div> 

<script> 
//app declaration 
var app = angular.module("myApp",[]); 

//controllers declaration 
app.controller('myCtrl1',function($scope, dummyService){ 
    $scope.name = "Peter"; 
}); 

app.controller('myCtrl2',function($scope, dummyService){ 
    $scope.name = "Roger"; 
}); 

//service declaration 
app.service('dummyService',function(){ 
    this.name = "Martin"; 
}); 

</script> 

</body> 

</html>

需要量：

當我開始打字輸入框中的文本。它必須立即在兩個跨度（即在div1和div2中）立即更新。

來源

2016-09-27 Deadpool

是沒有人能回答這個問題的？唉...;（ – Deadpool

試試這個：http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers –

@Peterson我在路上:) –

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

 
//controllers declaration 
 
app.controller('myCtrl1',function($scope, dummyService, $rootScope){ 
 
    $scope.name = "Peter"; 
 
    $scope.change = function() { 
 
     $rootScope.$emit('changeName',{name:$scope.name}); 
 
    } 
 
}); 
 

 
app.controller('myCtrl2',function($scope, dummyService, $rootScope){ 
 
    $scope.name = "Roger"; 
 
    $rootScope.$on('changeName', function(event,data) { 
 
     $scope.name = data.name; 
 
    }) 
 
}); 
 

 
//service declaration 
 
app.service('dummyService',function(){ 
 
    this.name = "Martin"; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 

 
<div class="div1" ng-controller="myCtrl1"> 
 
    <input type="text" ng-model="name" ng-change="change()"> <span>{{name}}</span> 
 
</div> 
 

 
<div class="div2" ng-controller="myCtrl2"> 
 
    <span>{{name}}</span> 
 
</div> 
 
    
 
</body>

來源

2016-09-27 07:58:35 ram1993

污染$ rootScope將是一個壞主意 –

這個作品... GG好！雖然我認爲Pankaj是正確的，但是Pankaj上面的代碼沒有在笨重的工作！ – Deadpool

第一件事你沒有綁定服務變量與$scope變量，但是這不會解決它。

問題是，您正在使用基本類型變量，其中每次爲變量分配新值時，都會更改該對象的引用。通過將其更改爲引用類型對象，可以輕鬆解決此問題。通過綁定對象引用，您可以確保每當對象屬性發生更改時，它都會更改它指向的基礎對象的副本。同樣在這裏，我們指出我們的服務model變量與scope的model對象，他們將確保保持同步。

標記

<body ng-app="myApp"> 

    <div class="div1" ng-controller="myCtrl1"> 
    <input type="text" ng-model="model.name"> <span>{{name}}</span> 
    </div> 

    <div class="div2" ng-controller="myCtrl2"> 
    <span>{{model.name}}</span> 
    </div> 

</body>

代碼

app.controller('myCtrl1', function($scope, dummyService) { 
    $scope.model = dummyService.model; 
}); 

app.controller('myCtrl2', function($scope, dummyService) { 
    $scope.model = dummyService.model; 
}); 

//service declaration 
app.service('dummyService', function() { 
    this.model = { 
    name: "Martin" 
    }; 
});

Demo

可以實現與primitive類型同樣的事情，以及，你在你的問題中有什麼。但是對於同樣的，你必須編寫getter & setter來設置變量值。你可以改變服務下面

app.service('dummyService', function() { 
    var self = this; 
    var name = "Martin"; //private variable 

    self.setName = function(name) { 
    name = name; 
    } 
    self.getName = function() { 
    return name; 
    } 
});

Plunkr Here

來源

2016-09-27 07:54:23

Plunkj在Plunker值沒有得到更新在第二個div充滿並看到在第一個div更改！ Pl檢查... – Deadpool

你的兩個小提琴都不起作用。 Pl，有一個看法！（嘗試改變輸入文字） – Deadpool

我會在短時間內更新它們，而 –

您可以通過方法的參考實現這一目標。考慮到，你需要用不同的值初始化兩個名稱變量。否則，你可以簡單地使用服務變量（$ scope.name = dummyService.name）

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

 
//controllers declaration 
 
app.controller('myCtrl1',function($scope, dummyService, $rootScope){ 
 
    $scope.name = "Peter"; 
 
    $scope.change = function() { 
 
     dummyService.setName($scope.name); 
 
    } 
 
    
 
    
 
}); 
 

 
app.controller('myCtrl2',function($scope, dummyService, $rootScope){ 
 
    $scope.name = "Roger"; 
 
    $scope.change = function(name) { 
 
     $scope.name = name; 
 
    } 
 
    $scope.init = function() { 
 
     dummyService.set($scope.change); 
 
    } 
 
    $scope.init(); 
 
}); 
 

 
//service declaration 
 
app.service('dummyService',function(){ 
 
    this.name = "Martin"; 
 
    this.set = function(method) { 
 
     this.setName = method; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 

 
<div class="div1" ng-controller="myCtrl1"> 
 
    <input type="text" ng-model="name" ng-change="change()"> <span>{{name}}</span> 
 
</div> 
 

 
<div class="div2" ng-controller="myCtrl2"> 
 
    <span>{{name}}</span> 
 
</div> 
 
    
 
</body>

來源

2016-09-27 11:12:47 ram1993

在示例中共享控制器中的數據 - AngularJs

回答

相關問題