如何将rootScope更改为Angular中的Service？

Question

I am new to Angular and still learning. 我是Angular的新手，仍然在学习。

Here is the sample fiddle . 这是样本小提琴。

I would like to know how do I convert it to a service? 我想知道如何将其转换为服务？ I find writing both setStatus on NavController and HeaderController seems quite wrong, are there any better way working for this one? 我发现在NavController和HeaderController上同时写setStatus似乎是错误的，是否有更好的方法来解决这一问题？

Scenario 情境

When the user click on close button, the whole nav which with background will be displayed none while when the user clicked on menu button, nav will get a class of is-active which makes the nav displayed block. 当用户单击close按钮时，整个带有背景的nav将不显示，而当用户单击menu按钮时， nav将得到一个is-active类，从而使nav显示块。

JS JS

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

app.controller('NavController', function($rootScope, $scope) {
    $rootScope.status = 'off';
    this.setStatus = function(status) {
        $rootScope.status = status;
    };
});

app.controller('HeaderController', function($rootScope, $scope) {
    this.setStatus = function(status) {
        $rootScope.status = status;
    };
});

DOM DOM

<div ng-app="myapp">
  <nav ng-controller="NavController as nav" ng-class="{ 'is-active': status == 'on' }" ng-init="nav.status" class="nav">
    <div class="nav__wrapper">
      <button ng-click="nav.setStatus('off')" class="nav__close">close</button>
    </div>
  </nav>

  <header ng-controller="HeaderController as header">
    <button ng-click="header.setStatus('on')">menu</button>
  </header>
</div>

Any help would be greatly appreciated, thank you! 任何帮助将不胜感激，谢谢！

Answer 1

There are couple of things which caused the issue on JSFiddle 有几件事导致了JSFiddle上的问题

The angular js library was being loaded onload which is parsing the script way before the module myapp defined, so the LoadType on JSFiddle should be No Wrap-in<body> 角JS库正在加载onload其解析模块之前的脚本方式myapp定义，所以LoadType上的jsfiddle应该是No Wrap-in<body>
The styles which has been dumped in JSFiddle needs to be RAW CSS & not less/sass, since JSFIddle would not parse those to CSS. 由于JSFIddle不会将样式解析为CSS，因此已转储到JSFiddle中的样式需要为RAW CSS而不是less / sass。

I corrected those things & your JSFiddle worked smoothly ;) 我纠正了这些问题，您的JSFiddle顺利运行了；）

Running JSFiddle link 运行JSFiddle链接

Now, regarding the actual issue of moving the common/sharable data to factory /service is achieved by creating a simple factory module like below & referring it all controllers 现在，关于将通用/可共享数据移至工厂/服务的实际问题是通过创建一个如下所示的简单工厂模块并引用所有控制器来实现的

JS CODE: JS代码：

myApp.factory('Data', function () {
   return { FirstName: '' };
});

myApp.controller('FirstCtrl', function ($scope, Data) {
   $scope.Data = Data;
});

myApp.controller('SecondCtrl', function ($scope, Data) {
   $scope.Data = Data;
});

HTML CODE: HTML代码：

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="Data.FirstName">
  <br>Input is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{Data.FirstName}}
</div>

Live Demo using factory/service @ JSFiddle 使用JSFiddle使用工厂/服务进行现场演示

Note: Using $rootScope for defining a global object like in your current code itself is a decent way of doing things, but anyway the same can be achieved using defining a new factory module like above. 注意：使用$rootScope像在您当前的代码本身中那样定义全局对象是一种不错的方法，但是无论如何，使用上面定义的新factory模块可以实现相同的目的。

References : 参考文献：

Using $rootScope : How do I use $rootScope in Angular to store variables? 使用$ rootScope：如何在Angular中使用$ rootScope来存储变量？
using service/factory module : Share data between AngularJS controllers 使用服务/工厂模块：在AngularJS控制器之间共享数据

如何将rootScope更改为Angular中的Service？

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-12-30 12:21:34

如何将rootScope更改为Angular中的Service？

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-12-30 12:21:34

解决方案1
0 已采纳 2015-12-30 12:21:34