我有一个非常简单的工厂:
var tv3Services = angular.module('tv3Services',[]);
tv3Services.factory('PanelService', [function(){
var _panel = "";
return {
getPanel: function() {return _panel;},
changePanel: function(newPanel) {_panel = newPanel;}
};
}]);
使用它的控制器:
var tv3App = angular.module('tv3App', ['tv3Services']);
tv3App.controller('AdminController', function($scope,PanelService) {
$scope.panel = PanelService.getPanel();
$scope.changePanel = function(panel) {
PanelService.changePanel(panel);
};
$scope.changePanel("hola");
});
这个简单的标记:
<html ng-app="tv3App">
<head>
<script src="service.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="AdminController">
<h1>This should send a glyphicon when panel ONLY is same as "start"</h1>
<div class="text-center">
<span ng-show="panel=='start'" class="glyphicon glyphicon-star"></span>
</div>
<strong>Panel is set to "hola" though ...</strong>
</body>
</html>
然而,它根本不起作用。小组似乎没有任何约束力。我正在调用$scope.changePanel("start");
,以便触发服务并为其分配值。
为什么这不起作用?
我得到了plunkr example。
答案 0 :(得分:2)
您需要致电$scope.panel = PanelService.getPanel();
以设置更新的服务价值,或者您可以$watch on service variable并在此基础上更新$ scope.panel值。
<强> CODE 强>
$scope.changePanel = function(panel) {
PanelService.changePanel(panel);
$scope.panel = PanelService.getPanel();
};
<强> Plunkr Here 强>
修改1
通过将服务getter方法引用分配给范围变量,如scope.panel = PanelService.getPanel
&amp;,可以实现所需的功能。在UI上绑定它时,您可以使用{{panel()}}
,以便面板在每个getter
周期内调用服务digest
。
<强> HTML 强>
<strong>Panel is set to "hola" though ... But got {{panel()}}</strong>
<强>控制器强>
tv3App.controller('AdminController', function($scope, $http, PanelService) {
$scope.panel = PanelService.getPanel; //asigning getter reference
$scope.changePanel = function(panel) {
PanelService.changePanel(panel);
};
$scope.changePanel("start");
});
Refer SO了解更多信息
修改2
另一种可以在服务上维护数组并将新值推入控制器的方法,一旦调用getter方法的服务,它就会将引用附加到$ scope变量&amp;每当服务更新发生时,更改也会在范围变量中反映到。
<强>服务强>
var tv3Services = angular.module('tv3Services', []);
tv3Services.factory('PanelService', [
function() {
var _panel = [];
return {
getPanel: function() {
return _panel;
},
changePanel: function(newPanel) {
_panel.push(newPanel);
}
};
}
]);
<强>控制器强>
var tv3App = angular.module('tv3App', ['tv3Services']);
tv3App.controller('AdminController', function($scope, $http, PanelService) {
$scope.panel = PanelService.getPanel(); //scope gets binded to the service variable
$scope.changePanel = function(panel) {
PanelService.changePanel(panel);
};
$scope.changePanel("start");
});
<强> HTML 强>
<body ng-controller="AdminController">
<h1>This should send a glyphicon when panel ONLY is same as "start"</h1>
<div class="text-center">
<span ng-show="panel=='start'" class="glyphicon glyphicon-star"></span>
</div>
<strong>Panel is set to "hola" though ... But got {{panel[0]}}</strong>
</body>
Edit2 Plunkr Here,Plunkr
中的另一个好例子感谢。
答案 1 :(得分:0)
在您使用服务的地方,尝试在缩小时明确声明您的服务名称,这将重命名您的变量。试试这个;
tv3App.controller('AdminController',['$scope','PanelService',
function($scope,PanelService) {
$scope.panel = PanelService.getPanel();
$scope.changePanel = function(panel) {
PanelService.changePanel(panel);
};
$scope.changePanel("hola");
}]);