how to log element in angular?

Question

I am working on an Angular application and i have a view who is containing an iframe (The purpose of that iframe is just to display a login form).

Like my attempt to submit the form manually was unsuccessful, i tried to log the formular to check if i am really able to reach it but i am confused about how to do that...

the form inside the iframe have name attribute myForm

  <iframe id="myIframe" name="myIframe" src="someUrl.com">
    <html>
     ...
     <form name="myForm" class="form" action="myAction()" method="post" onsubmit="myStuffToDO()">
       ...
       ...
     </form>
     ...
    </html>
  </iframe>

So the way that i am trying to log the form in my controller is like that:

    var iframeForm = angular.element.find('myForm');

console.log(iframeForm);

the result in hte console is that:

[]

I am really confused about how to do that so any help would be really kind.

The `action` attribute is missing a closing double quote in your snippet. — GillesC, Jul 22 '15 at 10:09

score 1 · Answer 1 · answered Jul 22 '15 at 10:08

1

.find('myForm') would find <myForm> tags, not tags with an attribute with the "myForm" value. .find('[name="myForm"]') is what you are looking for, but it won't work with the built-in element implementation because .find, as stated in the docs, is "Limited to lookups by tag name". That means you'll need to also include jQuery in your project. Then Angular will use it instead of its jqLite implementation and complex selectors will work.

answered Jul 22 '15 at 10:08

Sergiu Paraschiv

9,929
5
36
47

If jquery is already included in the project .find( ' [name="myForm"] ' ) should work? – adam Jul 22 '15 at 10:10
So if it is not working, it could be because jquery is not included in the remote app targeted by the iframe or it is impossible? – adam Jul 22 '15 at 10:15
So the `iframe` loads stuff from another domain and you are trying to do JS stuff in it from outside? Then there are two situations: either the JS is _outside_ and you might have a cross-domain permissions issue, or the JS is _inside_ and you don't have jQuery there. – Sergiu Paraschiv Jul 22 '15 at 10:18
Anyway to try it in standard javascript with angular? Do you have an example in mind? – adam Jul 22 '15 at 10:21
How about doing a `document.getElementById('myTable')` and add a `id="myTable"` to the table instead? – Sergiu Paraschiv Jul 22 '15 at 10:22
document.getElementById is not working in angular [link](http://stackoverflow.com/questions/17230242/angular-element-vs-document-getelementbyid-or-jquery-selector-with-spin-busy-c) – adam Jul 22 '15 at 10:28
Indeed it's working so i have gave a try to getElementsByName because the form inside the iframe don't have id attribut but i still receive in the console an empty array. I try to target something outside the iframe and it works... var form = document.getElementsByName('myForm'); – adam Jul 22 '15 at 10:42
Then it's a cross domain permissions issue: http://stackoverflow.com/questions/1291812/iframe-javascript-access-parent-dom-across-domains – Sergiu Paraschiv Jul 22 '15 at 10:47
If it is a cross domain permission issue, is it normal that i am not receiving any error related to that in the console? – adam Jul 22 '15 at 10:52
Are you sure the stuff inside the iframe are loaded _before_ you try to access them? :) – Sergiu Paraschiv Jul 22 '15 at 10:53
Then it's something entirely different. Can you make a fiddle reproducing this exact issue so we can debut it? – Sergiu Paraschiv Jul 22 '15 at 12:01

score 0 · Answer 2 · answered Jul 22 '15 at 10:10

0

You can access using form name withing scope like below:

console.log($scope.formName);

You can access all elements by their names inside formName object.

answered Jul 22 '15 at 10:10

mjaydip

143
1
8

Thank you for your help but it's not working, maybe because it is inside an iframe where the code is in standard javascript – adam Jul 22 '15 at 10:18
Have you tried plain JS, document.getElementByTagName('myForm')? – mjaydip Jul 22 '15 at 11:03

score 0 · Answer 3 · answered Jul 22 '15 at 10:39

0

from the page you can access angular element by angular.element+jquery selector

eg : angular.element("[name='myForm']")

answered Jul 22 '15 at 10:39

ARUNRAJ

469
6
15

I have already tried that but it is not working, look at **@Sergiu Paraschiv** answers, maybe you know another way? – adam Jul 22 '15 at 10:47

how to log element in angular?

3 Answers3