Every time I run the code in my controller, it seems to be executed twice, resulting in duplicate outputs in the console.log window of Chrome Dev Tools.
questions.html
<div ng-controller="questionController as vm"> </div>
questionController.js
var questionController = function($location, questionService, $env) {
var vm = this;
console.log('in the controller') // this runs twice
}
app.js
app.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
var viewBase = '/apps/src/views/';
$urlRouterProvider.otherwise("/");
$locationProvider.hashPrefix(''); // get rid of ! was getting #!
$stateProvider
.state('questions',
{
url: "/questions",
templateUrl: viewBase + "questions.html"//,
//controller: "questionController"
//views: {
//
//}
});
}]
);
I have noticed that by commenting out the controller: "questionController" in the route, the duplication issue is resolved.
Last year, when I used ui-router, I never faced any problems when using the controller:.
Could there be a compatibility bug with some new version combinations?
After attempting to resolve the issue but not displaying data
I am incorporating ui-grid
<!--<div ng-controller="questionController as vm">-->
<div ui-grid="{ data: vm }" class="grid"></div>
<!--</div>-->
Note that I have commented out the div with the ng-controller attribute.
var vm = this
var promise = questionService.getAllQuestions();
promise.then(function(response) {
vm.myData = response;
console.log('questionCtrl promise data', vm.myData);
});
The console.log statement successfully displays the data.
Successfully Resolved
It appears that I had to make the following changes
route
controller: "questionController",
controllerAs : "vm"
OR
controller: "questionController"
Then
<div ui-grid="{ data: vm.myData }" class="grid"></div>