我有一个AngualrJS应用程序，当前是单页。使用布尔值ng-show/hide时，它将显示一个Leaflet地图或两个Ag-grid，一次仅显示地图或网格。
我以为最好使用ui-router添加路由，并具有2个视图，一个用于Leaflet映射，一个用于两个ag-grid。
我在网格上遇到了一些问题，可能是因为有必要做类似的事情
// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(eGridDiv, gridOptions);
我不是要求解决我的编码问题，希望自己解决。
相反，我想请您帮助我了解AngularJ的ui路由器视图如何工作。
它们是否始终绑定到DOM，并一直隐藏直到进入适当的状态，还是随着状态变化将它们添加到DOM中/从DOM中删除？
还有其他需要了解的内容，以便了解其在幕后的工作原理吗？
如果我正确理解了需求，您可以先定义一些条件，然后过渡到适当的视图。
在示例代码中，您可以更改用于更改显示视图的输入的checked属性。
var myApp = angular.module('helloworld', ['ui.router'])
.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
})
.directive('selectView', selectView);
let state;
let transitions;
function selectView($state, $transitions) {
state = $state;
transitions = $transitions;
return {
restrict: 'A',
link: selectViewLinkFn
}
}
function selectViewLinkFn($scope, $element) {
const triggers = document.querySelectorAll('input[type="radio"]');
transitions.onSuccess({}, () => {
console.log('onSuccess: ', document.querySelector('h3').innerHTML);
});
transitions.onStart({}, () => {
const findedInView = document.querySelector('h3');
console.log(`onStart: ${findedInView ? findedInView.innerHTML : 'nothing found'}`);
});
setView($scope);
for (const trigger of triggers) {
trigger.addEventListener('change', () => setView($scope, true))
}
function setView(scope, needDigest) {
// Check some conditions
let currentRoute;
for (const trigger of triggers) {
if (trigger.checked) {
currentRoute = trigger.value;
}
}
state.go(currentRoute);
if (needDigest) {
scope.$digest();
}
}
}
selectView.$inject = ['$state', '$transitions'];<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>
<body ng-app="helloworld" select-view>
<label for id="selectHello">Hello</label>
<input name="selectorForView" type="radio" id="selectHello" value="hello" checked>
<label for id="selectAbout">About</label>
<input name="selectorForView" type="radio" id="selectAbout" value="about">
<h2 ng-bind="selectorForView">
<h2>
<ui-view></ui-view>
</body>