Question

我有一个非常简单的工厂：

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。

Answer 1

您需要致电$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");
});

Updated Plunkr

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

中的另一个好例子

感谢。

Answer 2

在您使用服务的地方，尝试在缩小时明确声明您的服务名称，这将重命名您的变量。试试这个;

tv3App.controller('AdminController',['$scope','PanelService',
function($scope,PanelService) {
    $scope.panel = PanelService.getPanel();
    $scope.changePanel = function(panel) {
        PanelService.changePanel(panel);
    };

    $scope.changePanel("hola");
}]);

我从控制器使用这个Angular工厂错了吗？

2 个答案: