I'm facing a situation where I have an index.html page with two views: View1.html on the left and view2.html on the right. However, when a record is selected in the left view, I want to switch the right view from view2.html to view3.html.
Currently, I am utilizing the following code snippet:
$scope.$state.go('reg.detail', { 'id': item.Id });
To change the view from View2.html to View3.html
Although the URL changes to details/{id}, the UI (html markup) does not update to view3.html. This means that the controller for view3 is also not being triggered (I have omitted the controller code below for simplicity).
var app = angular.module('app', ['ui.router']);
(function () {
'use strict';
angular
.module('app')
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('reg', {
url: '/',
views: {
'leftPanel': {
templateUrl: 'app/View1.html',
controller: 'view1Ctrl'
},
'rightPanel': {
templateUrl: 'app/View2.html',
controller: 'view2Ctrl'
}
}
})
.state('reg.detail', {
url: 'detail/:id',
parent: 'reg',
templateUrl: 'app/View3.html',
controller: 'view3Ctrl'
})
}]);
})();
(function () {
'use strict';
angular
.module('app')
.controller('appCtrl', appCtrl);
appCtrl.$inject = ['$scope', '$rootScope','$state'];
function appCtrl($scope, $rootScope, $state) {
}
})();index(main) page code :
<div auto-size>
<div ui-view="leftPanel" >Left panel is loading...</div>
<div ui-view="rightPanel" >Right panel is loading...</div>
</div>Any assistance would be greatly appreciated. Please let me know if you need more code details.