ng-app的输出
[英]Output for ng-app
问题描述
Why the output for second div tag is displaying normal? 
为什么第二个div标签的输出显示正常？ Why there is no binding of angular js with it? 为什么没有Angular js绑定呢？
Could you please explain me? 你能解释一下吗？
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Demo</title>
<script src="scripts/angular.min.js"></script>
<script src="scripts/Script.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="myApp1" ng-controller="myCtrl">
{{ first_name +" "+ last_name }}
</div>
<div ng-app>
10 +20 = {{ 10 + 20 }}
{{ 1 == 2 }}
{{ ['ajay','kumar','hari','bag'][0] }}
</div>
<script>
var my_module = angular.module("myApp1", []);
var my_Controller = function ($scope) {
$scope.first_name = "vijay";
$scope.last_name = "kumar";
}
my_module.controller("myCtrl", my_Controller);
</script>
</body>
</html>
-----------output------ -----------输出------
vijay kumar 维杰·库玛
10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }}
3 个解决方案
解决方案1
0 2016-07-20 18:00:46
Try like this. 尝试这样。
var app = angular.module('myApp1', []); app.controller('myCtrl', function($scope) { $scope.first_name = "vijay"; $scope.last_name = "kumar"; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body > <div ng-app="myApp1" ng-controller="myCtrl"> {{ first_name +" "+ last_name }} <div> 10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }} </div> </div> </body>
解决方案2
0 2016-07-20 18:10:48
As specified in the AngularJS docs only one AngularJS application can be auto-bootstrapped per HTML document. 如AngularJS文档中所指定，每个HTML文档只能自动引导一个AngularJS应用程序。 The first ng-app found in the document will be used to define the root element to auto-bootstrap as an application. 在文档中找到的第一个ng-app将用于定义根元素以作为应用程序自动引导。 If you want to use another ng-app you should manually bootstap the app. 如果要使用其他ng-app，则应手动引导该应用。
See the angularJS docs section for the detailed explanation. 有关详细说明，请参见angularJS文档部分。 https://docs.angularjs.org/api/ng/directive/ngApp https://docs.angularjs.org/api/ng/directive/ngApp
解决方案3
0 2016-07-20 18:16:23
From AngularJS documentation - 从AngularJS 文档 -
only one AngularJS application can be auto-bootstrapped per HTML document.
In other words, ng-app directive can be used only once in your entire application. 换句话说，ng-app指令在整个应用程序中只能使用一次。 S 小号
In your case, ng-app is limited to just one div tag. 就您而言，ng-app 仅限于一个div标签。 Outside this div tag, angularjs' features won't be accessible. 在此div标签之外，无法访问angularjs的功能。 you can have a parent div with the ng-app directive, followed by the current divs. 您可以使用ng-app指令来设置父div，然后是当前div。 Or simply but the directive in your body tag. 或者只是您的body标签中的指令。
<!DOCTYPE html> <html> <head> <title>Angular JS Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script src="scripts/Script.js"></script> <meta charset="utf-8" /> </head> <body> <div ng-app="myApp1"> <!-- parent div --> <div ng-controller="myCtrl"> {{ first_name +" "+ last_name }} </div> <div ng-app> 10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }} </div> </div> <script> var my_module = angular.module("myApp1", []); var my_Controller = function ($scope) { $scope.first_name = "vijay"; $scope.last_name = "kumar"; } my_module.controller("myCtrl", my_Controller); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.