如何在角度中將rootScope更改爲Service？

我想知道如何將其轉換爲服務？我發現在NavController和HeaderController上寫setStatus似乎是相當錯誤的，有沒有更好的方法爲這個工作？

方案

當顯示close按鈕，用戶點擊，這與背景將同時在用戶上menu按鈕，點擊會顯示沒有整體nav，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; 
    }; 
});

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>

任何幫助將不勝感激，謝謝！

來源

2015-12-30 draftdraft88

對於小提琴的工作（至少不會失敗，未知模塊），點擊在JavaScript窗格中的Javascript選項，並選擇「加載類型：沒有換行 - 在< body >」 –

有造成這一問題上的jsfiddle

角的js庫被加載onload其定義模塊myapp前解析腳本的方式對夫婦的事情，等等的jsfiddle的LoadType應該No Wrap-in<body>
已在的jsfiddle被傾倒的風格必須是RAW CSS &不是更少/上海社會科學院，因爲的jsfiddle不會解析那些CSS。

我糾正&你的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代碼：

<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

來源

2015-12-30 12:21:34 dreamweiver

謝謝你，改變了原來的帖子。雖然我的主要問題是如何將rootScope轉換爲服務。 – draftdraft88

再次感謝，我使用自定義指令，似乎這是完美的方式來使用它，而不是使用服務/工廠沒有任何數據共享。 – draftdraft88

如何在角度中將rootScope更改爲Service？

回答

相關問題