2016-11-11 3 views
1
<div ng-app=""> 
    <form> 
     First Name: <input type="text" ng-model="firstname"> 
    </form> 
    <h1>You entered: {{firstname}}</h1> 
    </div> 

Der obige Code wird in Ordnung sein. Aber wenn die ng-app = "" Direktive verschoben wird, um ein Element zu bilden, wird es nicht funktionieren. Irgendeine Idee warum ist das. Warum das Formularelement nicht die ng-app-Direktive übernimmt und die Anwendung bootstrapptAngular ngApp Direktive

// This will not work 
    <div> 
    <form ng-app=""> 
     First Name: <input type="text" ng-model="firstname"> 
    </form> 
    <h1>You entered: {{firstname}}</h1> 
    </div> 

Dank

+0

ng-app müssen top level sein. Body-Tag einfügen –

Antwort

0

ng-app ist die Richtlinie, die die Anwendung
so meist ist es auf <body> Tag oder Haupt Tag der Anwendung
Wie verwendet zu initialisieren ist verwenden: -

<body ng-app="myApp"></body> 

ODER

<div ng-app="myApp"> 
    <form> 
    // add other elements 
    </form> 
</div> 

Also diese Art der Richtlinie ist für Kindelemente nicht anwendbar, auch wenn Sie es nicht, weil diese App anwenden funktionieren, indem Sie nicht übergeordnetes Element betrachten, so auch offensichtlich untergeordnetes Element nicht
In Ihrem Fall gearbeitet wird wenn Sie <form> Tag auf Top-Ebene verwenden, dann können Sie es gerne verwenden: -

<body> 
    <form ng-app="myApp"> 
    </form> 
</body> 
0

Idealer ng-App sollte auf root-Ebene sein. aber in Ihrem Code ist ein Teil außerhalb der ng-App, die Winkel kümmern sich nicht um von zB Die H1-Tag Sie es innerhalb des Formularelement schreiben kann oder nehmen ng-App auf der Root-Ebene

<div> 
 
    <form ng-app=""> 
 
     First Name: <input type="text" ng-model="firstname"> 
 
     
 
     <h1>You entered: {{firstname}}</h1> 
 
    </form> 
 
</div>

0

Es funktioniert, das Problem mit, dass die scope des App. Sie haben ng-app unter <form ng-app=""> definiert, sodass der Umfang nur auf den Anfang bis zum Ende des Tags beschränkt ist. Jetzt haben Sie <h1>You entered: {{firstname}}</h1> außerhalb der Grenzen von ng-app platziert, damit es nicht funktioniert.

Überprüfen Sie die Arbeits plnkr - http://plnkr.co/edit/zaTdGCouFrAXJywUSpcl?p=preview

<form ng-app=""> 
     First Name: <input type="text" ng-model="firstname"> 

     <h1>You entered: {{firstname}}</h1> 
    </form> 
0

Aus der Dokumentation für ng-app:

Verwenden Sie diese Anweisung zur automatischen Bootstrap einer AngularJS Anwendung. Die ngApp-Direktive bezeichnet das Wurzelelement der Anwendung und ist typischerweise in der Nähe des Wurzelelements der Seite platziert - z. B. . auf der oder Tags.

In diesem Code ist die ng-app Richtlinie auf höchster Ebene und der Winkel Ausdruck {{firstname}} seinen Wert aus dem Modell nehmen.

<div ng-app=""> 
    <form> 
     First Name: <input type="text" ng-model="firstname"> 
    </form> 
    <h1>You entered: {{firstname}}</h1> 
</div> 

In diesem Code ist der Winkel Ausdruck {{firstname}} kann sein Modell nicht lösen, da sie aus dem Winkel ng-app liegen. So handelt es einfach als Klartext.

<div> 
    <form ng-app=""> 
     First Name: <input type="text" ng-model="firstname"> 
    </form> 
    <h1>You entered: {{firstname}}</h1> 
</div>