Поиск div в представлении Angualr JS ui-router с использованием document.querySelector - PullRequest
Новая
       22

Поиск div в представлении Angualr JS ui-router с использованием document.querySelector

1 голос
/ 09 апреля 2020

Пожалуйста, смотрите https://jsfiddle.net/mawg/fu9er5cy/3/

Я изменил захватывающий Plunker (следовательно, это немного сложнее, чем необходимо, чтобы продемонстрировать мою проблему), и в <div ng-controller="myController">

Я добавил <div id="myDiv">Can this be found?</div>

и в myController я добавил: 

if (document.querySelector('#myDiv') === null)
{
    alert('Div not found !!');
}
else
{
    alert('yay, Div found :-)');
}

Див можно увидеть, выбрав «Информация о книге», и я наивно подумал, что код контроллера и, следовательно, document.querySelector() будет выполнено, когда я перейду к представлению этого состояния.

Как вы можете видеть, оно оценивается сразу и говорит, что div не найден.

Как вы также можете видеть из моего связанного вопроса , я хочу найти div, только когда я изменяю состояние и перехожу к состоянию, которое показывает это представление и, следовательно, его контроллер, чтобы я мог document.querySelector div и введите ag-grid в него.

Как я могу это сделать?

Ответы [ 3 ]

1 голос
/ 11 апреля 2020

Вы можете запустить проверку всякий раз, когда что-то в DOM изменяется, а затем удалить слушателя, как только div будет найден 

function func() {
  if (document.querySelector('#myDiv') !== null) {
    document.documentElement.removeEventListener('DOMSubtreeModified', func);
    alert('yaya, Div found :-)');
  } 
}

document.documentElement.addEventListener('DOMSubtreeModified', func);
func();
1 голос
/ 09 апреля 2020

1) Ваш <div id="myDiv">Can this be found?</div> существует в: 

$stateProvider.state("details", {
   url: "/details",

, и это не ваш маршрут по умолчанию: $urlRouterProvider.otherwise("/")

, поэтому давайте изменим его на $urlRouterProvider.otherwise("/details")

2) Я не знаю, как выглядит: 

getID: function($timeout) {
    return $timeout(function() {
      console.log("value resolved")
        //$scope.Company="Cognizant";
    }, 1000)
  }

, но он застрял на вашем пути на 1 се c. Вы начинаете отображать представление только после 1 се c.

, поэтому я удалил этот фрагмент кода.

3) Вы пытаетесь проверить идентификатор в том же цикле дайджеста с отображением представления, так что вы получите провал. для запуска цикла дайджеста или ввода в конец очереди вы можете добавить некоторое нулевое время ожидания: 

 $timeout(function(){
  if (document.querySelector('#myDiv') === null)
    {
        alert('Div not found !!');
    }
    else
    {
        alert('yaya, Div found :-)');
    }  
  },0)

фиксированный пример Fiddle

Надеюсь, это поможет вам разобраться:)

0 голосов
/ 09 апреля 2020

, пытаясь ответить @Maxim, я кодировал Plunker с нуля.

Это именно то, что я хочу.

Кажется, что каждый раз состояние маршрутизатора введено, его контроллер инициализирован, и в коде инициализации я могу найти div.

Что-то не так с моим гораздо большим приложением, которое не находит div. Итак, я начну с Plunker и по частям добавляю в него свое приложение, пока не получу его.

Я публикую этот ответ в надежде, что в будущем он кому-нибудь поможет. Вот код:

альфа. html

<div>
    <h1>Alpha</h1>
</div>

<a ui-sref="beta" ui-sref-active="beta">Beta</a>

бета. html

<div id="beta_div">
    <h1>Beta</h1>
</div>

<a ui-sref="alpha" ui-sref-active="alpha">Alpha</a>

index. html

<!DOCTYPE html>
<html ng-app="app">

<head>
     <link type="text/css" rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="application/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="application/javascript"
        src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script type="application/javascript"
        src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>

    <script type="application/javascript" src="app.js"></script>
    <script type="application/javascript" src="controllers.js"></script>
</head>

<body ui-view></body>

</html>

приложение. js

angular.module('app', [
    'ui.router'
]);

angular.module('app').config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/alpha');

        $stateProvider.state('alpha', {
            url: '/alpha',
            templateUrl: './alpha.html',
            controller: 'alphaController'
        });

        $stateProvider.state('beta', {
            url: '/beta',
            templateUrl: './beta.html',
            controller: 'betaController'
        });
    }  
]);

контроллеры. js

angular.module('app').controller('alphaController', ['$state',
    function ($state) {

    }
]);

angular.module('app').controller('betaController', ['$state',
    function ($state) {
        if (document.querySelector('#beta_div') === null) {
            alert('Div not found !!');
        }
        else {
            alert('Yay, Div found :-)');
        }        
    }
]);
...