Невозможно получить элемент из идентификатора внутри Углового UI Modal

У меня есть приложение AngularJS с Угловым UI Modal. Я хотел бы получить элемент DOM, определенный внутри модального HTML, с контроллера, но он вернул undefined.Невозможно получить элемент из идентификатора внутри Углового UI Modal

Я загрузил свой код в Plunker (http://plnkr.co/edit/eoOuJiVaYASH1jMO8t2q?p=preview).

В контроллере ModalInstanceCtrl, если я пытался получить элемент myElem, определенный в модальной шаблоне он дал мне неопределенное исключение, как показано ниже, но работает хорошо, если бы я комментировал var elem = $document.getElementById('myElem');.

 
TypeError: undefined is not a function 
    at new (http://run.plnkr.co/K8SndGsk5DANhGl2/:36:28) 
    at invoke (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:3918:17) 
    at Object.instantiate (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:3929:23) 
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:7216:28 
    at resolveSuccess (http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js:1710:32) 
    at wrappedCallback (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:11498:81) 
    at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:11584:26 
    at Scope.$eval (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:12608:28) 
    at Scope.$digest (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:12420:31) 
    at Scope.$apply (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:12712:24)

Что-нибудь я пропустил в коде ниже?

Спасибо,

источник

2014-09-15 Shaun Xu

Вы не должны получать доступ к DOM элементов в контроллере. Если вам нужно получить доступ к элементам DOM, вы должны использовать директивы, либо встроенные, либо настраиваемые директивы. Опишите, в общем, то, что вы пытаетесь достичь. – shaunhusain

http://blog.nebithi.com/angularjs-dos-and-donts/ <== см. Здесь или видеоролик AngularJS Best Practices на YouTube от Misko для некоторых простых правил, когда вы просто изучаете веревки. Выполнение манипуляций с DOM в контроллерах является кардинальным грехом, либо вы, либо какой-либо другой будущий разработчик будете ненавидеть вас за то, что выбрали эту привычку, а не научились делать это надлежащим образом. – shaunhusain

Из предоставленной вами ссылки доступ к DOM с контроллера - это плохо, потому что в теории контроллер никогда не должен знать DOM. Но я хотел бы знать, почему код ниже не удалось. Похоже, что контроллер был вызван до создания DOM. –

Как вы сказали, что DOM был построен после того, как контроллер был executed.Try инъекционного $ таймаут в контроллер модальных и установить $ таймаут 0.

источник

2015-07-30 03:31:03 Randika

На самом деле это должно быть

var elem = document.getElementById('myElem');

вместо

var elem = $document.getElementById('myElem');

Удалить знак $. Он откроет модальное окно.

источник

2014-09-15 04:57:06 RahulB

Он может открыть модальное окно, но мне нужно получить DOM. Я обновил код и вернул 'null' из' elem'. Похоже, что DOM был создан после того, как контроллер был выполнен. –

@ShaunXu: Контроллеры должны содержать только бизнес-логику. Не манипулирование DOM. И да, контроллер вызывается перед созданием DOM. Используйте директивы для инкапсуляции ручного манипулирования DOM. – RahulB

$scope.openModal = function() { 
    var modal = $modal.open({ 
    animation: false, 
    templateUrl: 'app/modules/demo/modal.html', 
    controller: 'MyModalCtrl', 
    resolve: { 
     vm: function() { 
     return 'id'; 
     } 
    } 
    }); 
    modal.rendered.then(function() { 
    //process your logic for DOM element 
    console.info(document.getElementById('elementIdInModalTemplate'); 
    });

источник

2015-09-30 04:53:28 xinyu

, может быть, немного уточнить функцию? – Scorpio

Невозможно получить элемент из идентификатора внутри Углового UI Modal

ответ

Смежные вопросы