如何在不使用$ rootScope的情況下切換Angularjs ng-

Question

正如您可能已閱讀Angularjs FAQ，不鼓勵使用$rootScope。因此，一項服務更適合於存儲稍後將在控制器之間共享的數據。但是，如果不使用$rootScope，我不能使ng-show指令正常工作。

這是我正在做的事情;

的index.html

<div ng-controller="GlobalCtrl"> 
    <div ng-show="showSettings"></div> 
    <aside ng-show="showSettings" > 
     <h1>Some text</h1> 
     <button ng-click="closeSettings()">Ok</button> 
    </aside> 
</div> 

app.js （我自舉程序因爲我開發科爾多瓦..代碼截斷）

var app = angular.module('tibibt', ['tibibt.controllers', 'tibibt.filters', 'tibibt.services']); 
angular.element(document).ready(function() { 
    angular.bootstrap(document, ['tibibt']); 
}); 

services.js

/* Create an application module that holds all services */ 
var tibibtServicess = angular.module('tibibt.services', []); 

/* Global service */ 
tibibtServicess.service('globalService', function() { 
    this.Data = { 
     showSettings: 'false' 
    }; 
    this.getAll = function() { 
     return this.Data; 
    }; 
    this.setSettings = function (val) { 
     this.Data.showSettings = val; 
    }; 
}); 

個

controllers.js

/* Create an application module that holds all controllers */ 
var tibibtControllers = angular.module('tibibt.controllers', []); 

tibibtControllers.controller('GlobalCtrl', function ($scope, globalService) { 

// Get initial value 
$scope.showSettings = globalService.getAll().showSettings; 
console.log('Settings initially set to -> ' + globalService.getAll().showSettings); 

// Open settings menu 
$scope.openSettings = function() { 
    globalService.setSettings('true'); 
    console.log('Settings set to -> ' + globalService.getAll().showSettings); 
}; 

// Close settings menu 
$scope.closeSettings = function() { 
    globalService.setSettings('false'); 
    console.log('Settings set to -> ' + globalService.getAll().showSettings); 
}; 
}); 

控制檯顯示的變化，但ng-show並不/更新綁定到這個變化！

Answer 1

嘗試：

$scope.Data = globalService.getAll(); 

HTML：

<div ng-controller="GlobalCtrl"> 
    <div ng-show="Data.showSettings"></div> 
    <aside ng-show="Data.showSettings" > 
     <h1>Some text</h1> 
     <button ng-click="closeSettings()">Ok</button> 
    </aside> 
</div> 

DEMO

說明：

此行$scope.showSettings = globalService.getAll().showSettings;分配數據b y值 => showSettings的值被複制到$scope.showSettings =>它們是2個獨立的內存塊。當您更改globalService.Data.showSettings時，$scope.showSettings未更新，因爲它是另一個內存塊。

通過引用更改爲$scope.Data = globalService.getAll();分配數據=>它們指向相同的內存塊。

Answer 2

這僅僅是一個分配這就是一次評估：

$scope.showSettings = globalService.getAll().showSettings; 

因此該值永遠不會改變。

至少有可能的解決方案：

1. 指定的服務範圍：$ scope.settings = globalService。現在，您可以在您的視圖訪問服務：

   ng-show="settings.getAll().showSettings" 
   

2. 或自己註冊表：

   $scope.showSettings = false; 
   $scope.$watch(globalService.getAll().showSettings, function(newValue){ 
       $scope.showSettings = newValue; 
   });