将切换布尔值从服务传递到控制器

Question

我想 show/hide 一个基于在我的服务中发生变化的布尔值的元素。我希望在我的服务中更改此布尔值，以便多个控制器可以访问 true 或 false 值，但我无法 return 将此值发送给一个或多个控制器。目前我只能传递一个错误的值，尽管该值确实表明它在我的服务中发生了变化。这是我的控制器的示例...

angular.module('myApp')
   .service('ThisService', function(){
       function toggleDisplay(){
          return displayElement = !displayElement;
       }
   });

   .controller('ThisCtrl', function (thisService, $scope) {

        function init(){
            $scope.displayElement = ThisService.toggleDisplay();
        }

        $scope.toggleElement = function(){
            $scope.displayElement = ThisService.toggleDisplay();
        }

        init();
    });

我的HTML...

<div ng-show="displayElement">Show hide me</div>
<button ng-click='toggleElement()'></button>

你能告诉我如何将 return 的 true/false 值正确地发送到我的控制器吗？

Answer 1

您可以使用一个值，然后在您的服务中切换它。但是，您的服务定义无效，您的模块链中间有一个分号，您使用名称 "ThisService" 定义服务，但随后您尝试在控制器中将其引用为 "thisService"（区分大小写）。

JS:

angular.module("myApp", [])
    .value("DisplayElement", { value: true })
    .service("ThisService", function(DisplayElement) {
        this.toggleDisplay = function() {
          return DisplayElement.value = !DisplayElement.value;
        }
    })
    .controller("ThisCtrl", function(ThisService, $scope) {
        function init() {
            $scope.displayElement = ThisService.toggleDisplay();
        }

        $scope.toggleElement = function() {
            $scope.displayElement = ThisService.toggleDisplay();
        }

        init();
    });

HTML:

<div ng-app="myApp">
  <div ng-controller="ThisCtrl">
    <div ng-show="displayElement">Show hide me</div>
    <button ng-click="toggleElement()">Toggle Display</button>
  </div>
</div>

jsFiddle

您甚至可以删除该服务并直接在您的控制器中访问该值（您必须先注入它）。

将切换布尔值从服务传递到控制器

Pass toggling Boolean from service to controller

service

boolean

controller

toggle

angularjs