AngularJS使用服務變量ng-if

我希望能夠根據共享服務中的變量確定顯示哪個指令。這是我迄今爲止所擁有的。AngularJS使用服務變量ng-if

main.html中

<character-select ng-if="stateChangeService.playerState === 'characterSelect'"></character-select> 
<fight-display ng-if="stateChangeService.playerState === 'fight'"></fight-display>

服務

angular 
    .module('outerZone') 
    .service('stateChangeService', stateChangeService); 

    function stateChangeService() { 
    var vm = this; 

    vm.playerState = 'characterSelect'; 

    }

目前，當我加載頁面時，不會顯示任何信息。該服務被注入到字符選擇指令和爭用顯示指令以及MainController中。有任何想法嗎？

來源

2016-09-10 Cole Beckwith

你可以發佈更多的代碼？ – Zakaria

您的視圖無法識別您的服務。您應該將您的服務分配給上下文。

angular.module('outerZone').controller('MainController', MainController) 

MainController.$inject = ['stateChangeService']; 
function MainController(stateChangeService){ 
    var vm = this; 
    vm.stateChangeService = stateChangeService; 
} 

<body ng-controller="MainController as mc"> 
    <character-select ng-if="mc.stateChangeService.playerState === 'characterSelect'"></character-select> 
    <fight-display ng-if="mc.stateChangeService.playerState === 'fight'"></fight-display> 
</body>

來源

2016-09-10 21:41:20 Kindzoku

這工作。非常感謝！ –

歡迎光臨！ :) – Kindzoku

只能使用在視圖/ HTML其（在使用controllerAs圖案）爲界，以$scope或this那些變量。你應該公開你的service/factory/constant，或者更好的方法是編寫一個getter來訪問服務中的特定變量。其最佳做法是揭露服務相關事宜。有後，你可以調用的getter從視圖像getPlayerState()

HTML

<character-select ng-if="getPlayerState() === 'characterSelect'"></character-select> 
<fight-display ng-if="getPlayerState() === 'fight'"></fight-display>

代碼

app.controller('myCtrl', function(stateChangeService, $scope){ 

    $scope.getPlayerState = function(){ 
     return stateChangeService.playerState; 
    } 

})

來源

2016-09-10 21:41:41

觀角度可以在當前$範圍或父作用域訪問變量。因此您必須將服務分配給當前的$ scope或$ rootScope。

(function() { 
 
    angular.module('app') 
 
    
 
    // your service 
 
.service('myService', myServiceFunction); 
 
     function myServiceFunction(){ 
 
     this.data = function(){ return true; }; 
 
     }; 
 
     
 

 

 
    // your controller 
 
    .controller('myController', myControllerFunction); 
 

 
    // inject $scope and service 
 
    myControllerFunction.$inject=['$scope','myService']; 
 

 
    function myControllerFunction($scope, myService){ 
 
    //attatch service to current scope 
 
    $scope.myService = myService; 
 
    }; 
 
    
 
})();

<div ng-app='app' ng-controller="myController"> 
 
{{myService.data()}} 
 
</div>

來源

2016-09-10 23:18:16

AngularJS使用服務變量ng-if

回答

相關問題