我正在使用 ui-router 进行路由。我想知道如何从客户端状态(在本例中为编辑状态)动态更改父 templateUrl。
angular.module('TestModule', ['ui.router'])
.config(['$stateProvider', '$httpProvider',
function ($stateProvider, $httpProvider) {
'use strict';
$stateProvider
.state('index', {
abstract: true,
views: {
'@': {
templateUrl: '/defaultLayout.html',
controller: 'layoutController'
},
}]
})
.state('login', {
parent: 'index',
url: '/login',
templateUrl: '/login.html',
controller: 'loginController'
})
.state('edit', {
url: '',
parent: 'index',
//Change the templateUrl from defaultLayout.html to userLayout.html
})
.state('edit.user', {
url: '/edit/user',
views: {
//code
}
});
}])
.controller('layoutController', function () { })
.controller('layoutFluidController', function () { })
.controller('testCtrl', function () {
});
请告诉我如何实现这一目标。感谢你的帮助。谢谢您的问候。
最佳答案
您可以使用另一个具有不同模板 URL 的抽象父级“index2”作为 .state('index2', { }) 并将其用作 edit 状态的父级如下，
angular.module('TestModule', ['ui.router'])
.config(['$stateProvider', '$httpProvider',
function ($stateProvider, $httpProvider) {
'use strict';
$stateProvider
.state('index', {
abstract: true,
views: {
'@': {
templateUrl: '/defaultLayout.html',
controller: 'layoutController'
},
}]
})
.state('index2', {
abstract: true,
views: {
'@': {
templateUrl: '/defaultLayout2.html',
controller: 'layoutController'
},
}]
})
.state('login', {
parent: 'index',
url: '/login',
templateUrl: '/login.html',
controller: 'loginController'
})
.state('edit', {
url: '',
parent: 'index2',
//Change the templateUrl from defaultLayout.html to userLayout.html
})
.state('edit.user', {
url: '/edit/user',
views: {
//code
}
});
}])
.controller('layoutController', function () { })
.controller('layoutFluidController', function () { })
.controller('testCtrl', function () {
});
关于javascript - AngularJS UI-router 从客户端状态更改父模板 url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41050731/