AngularJs 视图和 DOM（传单和 ag-grid）

Question

我有一个当前为单页的 AngualrJS 应用程序。它将显示 Leaflet 地图或两个 Ag-grid，在布尔值上使用 ng-show/hide，一次只显示地图或网格。

我在想添加路由会更好，使用 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);

我不是要求解决我的编码问题，我希望自己解决。

相反，我请求您帮助我理解 AngularJs ui-router views 是如何工作的。

它们是否总是绑定到 DOM，并在进入适当的状态之前隐藏，或者它们是否随着状态变化从 DOM 添加到 to/removed？

为了理解它的工作原理，我还需要知道什么吗？

Answer 1

如果我理解正确的话，你可以先定义一些条件，然后再转换到合适的视图。

在示例代码中，您可以更改输入的 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>

AngularJs 视图和 DOM（传单和 ag-grid）

AngularJs views and the DOM (Leaflet and ag-grid)

dom

angularjs

angular-ui-router