Question

我是Angular的新手并且还在学习。

我想知道如何将其转换为服务？我发现在NavController上编写setStatus并且HeaderController似乎非常错误，是否有更好的方法为此工作？

方案

当用户点击close按钮时，当用户点击nav按钮时，menu将显示带背景的整个nav，is-active使nav显示块的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; }; });类。

JS

<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>

DOM

{{1}}

非常感谢任何帮助，谢谢！

Answer 1

有很多事情导致了JSFiddle的问题

正在加载角度js库onload，它在模块myapp定义之前解析脚本方式，因此JSFiddle上的LoadType应为No Wrap-in<body>
在JSFiddle中转储的样式需要是RAW CSS＆amp;不要少/ sass，因为JSFIddle不会解析那些CSS。

我纠正了这些事情＆amp;你的JSFiddle工作顺利;）

Running JSFiddle link

现在，关于将公共/可共享数据移动到工厂/服务的实际问题是通过创建如下的简单工厂模块来实现的。将它引用所有控制器

JS CODE：

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：

<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

注意：使用$rootScope来定义像当前代码本身一样的全局对象是一种不错的做事方式，但无论如何都可以通过定义新的factory模块来实现像上面一样。

参考文献：

使用$ rootScope：How do I use $rootScope in Angular to store variables?
使用服务/工厂模块：Share data between AngularJS controllers

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

1 个答案: