[英]Output for ng-app
为什么第二个div标签的输出显示正常? 为什么没有Angular js绑定呢?
你能解释一下吗?
<!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>
-----------输出------
维杰·库玛
10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }}
尝试这样。
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>
如AngularJS文档中所指定,每个HTML文档只能自动引导一个AngularJS应用程序。 在文档中找到的第一个ng-app将用于定义根元素以作为应用程序自动引导。 如果要使用其他ng-app,则应手动引导该应用。
有关详细说明,请参见angularJS文档部分。 https://docs.angularjs.org/api/ng/directive/ngApp
从AngularJS 文档 -
每个HTML文档只能自动引导一个AngularJS应用程序。
换句话说,ng-app指令在整个应用程序中只能使用一次。 小号
就您而言,ng-app 仅限于一个div标签。 在此div标签之外,无法访问angularjs的功能。 您可以使用ng-app指令来设置父div,然后是当前div。 或者只是您的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.