Как мне изменить rootScope на Сервис в Angular?

Question

Как мне изменить rootScope на Сервис в Angular?

0

Я новичок в Angular и все еще изучаю.

Я хотел бы знать, как мне преобразовать его в службу? Я нахожу, что писать setStatus на NavController и HeaderController кажется совершенно неправильным, есть ли лучший способ работать для этого?

сценарий

Когда пользователь нажимает кнопку close, весь nav который с фоном будет отображаться ни разу, когда пользователь нажимает кнопку menu, nav получит класс is-active который делает блок отображения nav.

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

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

Любая помощь будет принята с благодарностью, спасибо!

draftdraft88 30 дек. 2015, в 13:07

Источник

1

Для работы скрипки (по крайней мере, не с ошибкой с неизвестным модулем), выберите параметры Javascript на панели Javascript и выберите «Тип загрузки: без переноса - в <body>»
Nikos Paraskevopoulos 30 дек. 2015, в 11:59

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Для работы скрипки (по крайней мере, не с ошибкой с неизвестным модулем), выберите параметры Javascript на панели Javascript и выберите «Тип загрузки: без переноса - в <body>»

dreamweiver · Accepted Answer · 2015-12-30T10-23-00.000Z

Есть несколько вещей, которые вызвали проблему на JSFiddle

Угловая js-библиотека загружалась onload которая анализирует путь скрипта до определения модуля myapp, поэтому LoadType на JSFiddle должен быть No Wrap-in<body>
Стили, которые были сброшены в JSFiddle, должны быть RAW CSS и не менее /sass, так как JSFIddle не будет разбирать их с CSS.

Я исправил эти вещи, и ваш JSFiddle работал гладко;)

Запуск ссылки JSFiddle

Теперь, касаясь фактической проблемы перемещения общих/разделяемых данных на фабрику/услугу, достигается путем создания простого заводского модуля, такого как ниже, и ссылающегося на все контроллеры

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-код:

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

Демо-версия с использованием фабрики/сервиса @JSFiddle

Примечание. Использование $rootScope для определения глобального объекта, такого как ваш текущий код, является достойным способом выполнения действий, но в любом случае это может быть достигнуто с помощью определения нового factory модуля, такого как выше.

Рекомендации:

Использование $ rootScope: как использовать $ rootScope в Angular для хранения переменных?
с использованием сервисного/заводского модуля: обмен данными между контроллерами AngularJS

спасибо, изменился на оригинальный пост. Хотя моя главная проблема заключается в том, как преобразовать rootScope в сервис.
спасибо еще раз, я вместо этого использовал пользовательскую директиву, похоже, это идеальный способ использовать ее вместо использования service / factory без обмена данными в любом случае.