Angualr Js: ag-grid в представлении пользовательского интерфейса (templateUrl) - PullRequest
Новая
       82

Angualr Js: ag-grid в представлении пользовательского интерфейса (templateUrl)

0 голосов
/ 01 марта 2020

У меня было рабочее приложение, включая несколько ag-grid с. Я решил добавить ui-router, с сетками в templateUrl состояния.

Код слишком большой для публикации, но у меня есть две проблемы:

  • document.addEventListener("DOMContentLoaded" не вызывается, когда я помещаю его в контроллер шаблонаUrl

  • Я думаю, что я могу обойти это, переместив вложенные логики c в $transitions.onSuccess({ entering: 'search_result' }, function (transition), НО , когда я 

    const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGrid');
new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);

Я считаю, что currentCandidatesGridDiv является нулевым, несмотря на наличие 

<div ag-grid="SearchResultController.currentCandidatesGrid"></div>

в HTML из шаблонаUrl.

Опять же, вам не очень поможет без полного кода, который очень, очень большой.

Я думаю, что я ищу, это пример рабочего кода, Plunk, et c, чтобы показать, как поместить простую ag-сетку в templateUrl состояния ui-router.

Ответы [ 2 ]

1 голос
/ 03 марта 2020

Похоже, ваша настоящая проблема в том, что вы используете querySelector для идентификатора

# currentCandidatesGrid

# - селектор для идентификатора элемента

Это будет только соответствует вашему элементу, если у него есть указанный идентификатор, который в вашем примере не существует. 

<div ag-grid="SearchResultController.currentCandidatesGrid"></div>

Должен быть 

<div id="currentCandidatesGrid" ag-grid="SearchResultController.currentCandidatesGrid"></div>

, если вы хотите получить этот элемент через 

document.querySelector('#currentCandidatesGrid');
1 голос
/ 01 марта 2020

Этот ответ состоит из трех частей:

  • Почему DOMContentLoaded прослушиватели событий не работают в контроллерах
  • Использование пользовательских директив для внедрения кода, который манипулирует DOM
  • DEMO из ag-Grid с AngularJS

Почему DOMContentLoaded прослушиватели событий не работают в контроллерах

JavaScript библиотекам, которые манипулируют DOM, необходимо координировать с DOM манипуляции, выполняемые структурой AngularJS.

AngularJS изменяет обычный поток JavaScript, предоставляя собственную обработку событий l oop. Это разбивает JavaScript на классический и AngularJS контекст выполнения. Только операции, которые применяются в контексте выполнения AngularJS, получат выгоду от AngularJS привязки данных, обработки исключений, отслеживания свойств и т. Д. c.

document.addEventListener("DOMContentLoaded" не вызывается, когда я помещаю его в контроллер шаблонаUrl

AngularJS framework инициализирует себя после события DOMContentLoaded. Поэтому, естественно, любой DOMContentLoaded прослушиватель событий, добавленный впоследствии контроллером, пропустит это событие.

Следует соблюдать осторожность при смешивании AngularJS со сторонними библиотеками, которые манипулируют DOM.

Используйте пользовательские директивы для внедрения кода, который манипулирует DOM

Когда вы видите код, такой как document.querySelector("#myid'), замените его на пользовательскую директиву: 

app.directive("myDirective", function() {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        //DOM initialization here
        //e.g.  initialize(elem);

        scope.$on('$destroy', function() {
            //DOM teardown code here
        });
    }
})

Использование: * 1040 Директивы * <div id="myid" my-directive></div> AngularJS - это маркеры элемента DOM, которые сообщают AngularJS HTML компилятору ($ compile) присоединить указанное поведение к этому элементу DOM. Когда платформа AngularJS добавляет шаблоны в DOM, она анализирует разметку и вводит код для директив AngularJS. Когда он уничтожает DOM, он передает событие $destroy в области, связанной с элементом. Для получения дополнительной информации см. AngularJS Разработчик Руководство - Создание пользовательских директив DEMO ag-Grid с AngularJS Когда загружается скрипт ag-Grid, он не регистрируется с AngularJS 1.x. Это связано с тем, что AngularJS 1.x является дополнительной частью ag-Grid, и вам нужно указать ag-Grid, что вы хотите его использовать: agGrid.initialiseAgGridWithAngular1(angular); angular.module("example", ["agGrid"]) Для получения дополнительной информации см. Документация Ag-Grid - Basi c AngularJS 1.x Пример DEMO 

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])
.controller("exampleCtrl", function($scope) {

    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

    var rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

})
    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
    }
    body {
        padding: 1rem;
        overflow: auto;
    }
<script src="//unpkg.com/angular/angular.js"></script>
<script src='//unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.min.js'>
</script>

<body ng-app="example" ng-controller="exampleCtrl" style="height: 100%">

    <div ag-grid="gridOptions" class="ag-theme-balham" style="height: 100%;">
    </div>

</body>
...