Question

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

上面的代码很好。但是如果ng-app =＆＃34;＆＃34;指令如果移动到表单元素，那么它就不会起作用。知道为什么会这样。为什么表单元素不会采用ng-app指令并引导应用程序。

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

由于

Answer 1

ng-app是用于初始化应用程序的指令
所以大多数情况下它都用在<body>标签或主要标签上喜欢： -

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

或

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

所以这种类型的指令不适用于子元素，即使你应用它也行不通，因为做这个应用程序不会考虑父元素所以显然子元素也不会工作
在您的情况下，如果您在顶层使用<form>标记，则可以使用它： -

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

Answer 2

理想情况下，ng-app应该是根级别的。但是在你的代码中，有些部分是在ng-app之外，有些人不会照顾例如h1标签您可以在表单元素中编写它，或者将ng-app写入根级别

＆＃13;

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

＆＃13;

Answer 3

它会起作用，即应用的scope的问题。您在ng-app上定义了<form ng-app="">，因此范围仅限于标记的开头到结尾。现在，您已将<h1>You entered: {{firstname}}</h1>置于ng-app的边界之外，因此无法正常工作。

检查工作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>

Answer 4

来自ng-app的文档：

使用此指令自动引导AngularJS应用程序。该 ngApp指令指定应用程序的根元素，并且是通常放置在页面的根元素附近 - 例如在...上或标签。

在此代码中，ng-app指令位于顶层，角度表达式{{firstname}}将从模型中获取其值。

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

在此代码中，角度表达式{{firstname}}无法解析为其模型，因为它位于角度ng-app之外。因此它只是纯文本。

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

Angular ngApp指令

4 个答案: