AngularJs просмотров и DOM (Leaflet и ag-grid) - PullRequest
Новая
       0

AngularJs просмотров и DOM (Leaflet и ag-grid)

0 голосов
/ 24 февраля 2020

У меня есть приложение Angualr JS, которое в настоящее время является одной страницей. Он будет отображать либо карту Leaflet, либо две Ag-сетки, используя 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 работают.

Они всегда связаны с DOM и скрыты до тех пор, пока не будет введено соответствующее состояние, или они добавляются / удаляются из DOM при изменении состояния?

Есть ли еще что-то, что мне нужно знать, чтобы понять, как это работает под капотом?

1 Ответ

1 голос
/ 24 февраля 2020

Если я правильно понимаю требования, вы можете сначала определить некоторые условия, а затем выполнить переход к соответствующему представлению.

В коде примера вы можете изменить атрибут 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...