Robert Green Robert Green - 1 month ago 11
AngularJS Question

Angular Views Issue - Angular 1.5 - $stateProvider issue???- UI Router

I have a simple application which uses the $stateProvider to toggle between templates/views. I have two links:

<a href="#" ng-click="manage('area')">Areas</a>
<a href="#" ng-click="manage('vendors')">Vendors*</a>


I have the following handler in the controller:

var vm = $scope;

vm.manage = function (type) {

if (type == 'vendors') {
vm.message = 'Comming soon.';
} else {
$state.go(type);
}

};


When I click on the Areas link, I change the state to
area
(using the
$state.go(...)
call and then I see the template (and the html contents). Then, when I click the Vendors link I see the default message 'Comming soon'. Then when I click the Areas link again, I get the console.log from the area-controller but not the output (template and the html contents therein). What is going here, this is a very simple task that I do all the time and not sure why I'm not getting the static
<h1></h1>
the second time I request the
$state
change.

I have tried
$scope.apply()
and even
$scope = $scope.new
assuming somehow something in memory is clogged or something.

My module looks like this:

'use strict';
(function () {
angular.module('areaModule', []).config(areaModule);

areaModule.$inject = ['$stateProvider'];

function areaModule($stateProvider) {
$stateProvider
.state('area', {
url: '/area',
templateUrl: 'app/assetManagement-app/modules/area/area.tmpl.html',
controller: 'area-controller'
});
}
})();


and the controller looks like this

'use strict';
(function () {
angular.module('areaModule').controller('area-controller', areaController);

areaController.$inject = ['$scope', '$state', 'areaService'];

function areaController($scope, $state, areaService) {

var vm = $scope;

// clean up any memory leaks
$scope.$on('$destroy', function () { });

// init()
vm.init = function () {
console.log('area controller');
};

vm.init();

return vm;
}
}());


and the template is here

<div class="container" style="margin: 10px 5px 10px 5px;">
<h1>Area Management View</h1>
</div>


What's going on?

Answer

It is a clash between href and state.go. If you remove href in your html It is working as expected.

Comments