AngularJS - 如果不是空的，ng-app 將無法工作

Question

這個問題可能是一個非常非常基礎的Angular.JS問題。 可能之前在StackOverFlow中幾乎問過這個問題，但我找不到問題，所以我不得不問這個問題。

我是Angular.JS 的新手，我正在嘗試使用 Angular.JS 創建一個基本表單，該表單將從給定的輸入中驗證電子郵件地址。

對我有用的是-

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span> </form> <p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

但是我試圖給我的ng-app="my_try_app"應用程序命名是這樣的 - ng-app="my_try_app"所以我的代碼是這樣的 -

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <form ng-app="my_try_app" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span> </form> <p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

你看到它不起作用。

所以，我的問題是——

1. 給我的 angular 應用命名的方法是什么？

2. 為什么在我的情況下它不起作用？

提前感謝您的幫助。

Answer 1

您必須為您的視圖定義應用程序。 像這樣。

 angular.module("my_try_app",[]);

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <form ng-app="my_try_app" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span> </form> <p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

Answer 2

請查看下面的 angulaJS 文檔： https ://docs.angularjs.org/api/ng/directive/ngApp 基本上，“ng-app”在引導階段使用，它有助於 angular 初始化您的模塊。（確定應該受到角度影響的 HTML 代碼的邊界。）

例如： Name: ng-app 指令告訴 AngularJS <div>元素是 AngularJS 應用程序的“所有者”。 在提到的示例代碼中，angularJS 被配置為在默認模式下工作。 因此 ng-app 是可選的，即 null/empty。

但是，如果您希望使用 ng-app="my_try_app" 引導您的應用程序/HTMl，則可以按照以下任一操作

1. 在腳本標簽內或單獨的 Js 文件中定義一個角度控制器並使用<script src>導入，

   例如。 在您的 HTML 文件中添加以下內容

   <script> var app = angular.module('my_try_app', []); app.controller('myTryCtrl', function($scope) { $scope.text= "a@atcom"; }); </script>

2. 對於較大的應用程序，即具有多個視圖，使用 .. angular.bootstrap(document,["my_try_app"]);

希望這可以幫助。