I clearly do not understand the scope issues that I sense must be at play here. Despite having read quite a bit about scope in angularjs, and seeing it work as expected in many cases.
But here I have 2 nested controllers:
MainController [can inject RepositoryService]
--> ChallengeController [cannot successfully inject RepositoryService]
--> SingleChallengeController [cannot successfully inject RepositoryService]
--> PlayerController [can inject RepositoryService]
MainController is instantiated via the $routeProvider setup in app.js:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
});
And here is the app declaration:
...
<body ng-app="myApp">
<div id="m" class="section app-viewport" ng-view="" ng-keydown="keyPress($event);"></div>
...
Meanwhile the other 3 controllers are specified inline in main.html like so:
main.html:
<div id="viewport" viewport ng-hide="isPhone && isLandscape" class="section main">
<div class="container-fluid">
<div main-panel-row-maximize-height class="row main-panel-row">
<div class="main-panel">
<div class="row">
<div id="challenge-options-results" challenge-panel-init class="challenge-option-results display-visible" >
<section ng-controller="ChallengeController" class="challenge-container">
<div class="container-fluid">
<div class="row">
<div ng-controller="SingleChallengeController"/>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="display-hidden" id="controls-and-badges">
<div id="readout" ng-controller='PlayerController' class="balance">
<span class="readout-label balance">data</span><hr class="balance-separator">
<span class="amount" ng-bind="currData">$NaN</span>
</div>
...
I am attempting to inject the service ('RepositoryService') into these controllers using the 'constructor' like so:
var challengeControllers = angular.module('challengeControllers', []);
challengeControllers.controller('ChallengeController', ['$scope', function($scope, eventBusService, RepositoryService) {
...
This way of injecting works fine for MainController and PlayerController, but not the other two.
Here is the constructor for the service I want to inject:
var serviceModule = angular.module('RepositoryService', []);
serviceModule.factory("RepositoryService", ['$rootScope', function ($rootScope, $http) {
Is there anything obvious I am missing that suppresses what appears to me to be logical behavior associated with dependency injection?
Thanks very much for your help.
You should write your controller definition like this:
challengeControllers.controller('ChallengeController', ['$scope', 'eventBusService', 'RepositoryService', function($scope, eventBusService, RepositoryService) {
It seems like you forgot to add eventBusService and RepositoryService in the array arguments here.
By the way, if you don't have the need to get this code obfuscated in production, just don't mess with explicitly named injectables and write like this:
challengeControllers.controller('ChallengeController', function($scope, eventBusService, RepositoryService) {
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments