Is there any way to remove angular attributes in HTML elements?

Question

I was trying to understand how Angular.js works with a simple example.

<div ng-app="">
  <p>Input something in the input box:</p>
  <p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
  <h1>Hello {{name}}</h1>
</div>

Is there any way that I can remove all of this, and just use angular on a separate JavaScript?

I mean to be able to do something like...

document.getElementsByTagName('input')[0].ng-model = "name";
document.getElementsByTagName('h1')[0].innerHTML = "Hello {{name}}";

Or is it mandatory to mesh with the HTML attributes?

I couldn't find any information related. Thanks in advance.

Community · Accepted Answer · 2017-04-12 07:31:21Z

4

Like other MVVM frameworks, Angular is designed to be "obtrusive" (intermixed into the HTML), it's not really meant to be used unobtrusively. More in this question and its answers(s) on programmers.stackexchange.com: Is obtrusive JavaScript required to support a feature of AngularJS?

That doesn't mean you can't. You could use code to add the necessary attributes and such before letting Angular loose on your DOM. You'd do that by using manual initialization instead of the default automatic initialization, and putting your code filling in the attributes before the bootstrap call:

document.getElementsByTagName('input')[0].setAttribute("ng-model", "name");
document.getElementsByTagName('h1')[0].innerHTML = "Hello {{name}}";
// ...and so on...
angular.bootstrap(document, ['myApp']);

...but that's not how Angular is really meant to be used.

edited Apr 12, 2017 at 7:31

CommunityBot

11 silver badge

answered May 5, 2016 at 12:51

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jose Serodio Over a year ago

Thank you so much for your answer.

Collectives™ on Stack Overflow

Is there any way to remove angular attributes in HTML elements?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related