Output for ng-app
Question
Why the output for second div tag is displaying normal? Why there is no binding of angular js with it?
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 answers
solution1
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>
solution2
0 2016-07-20 18:10:48
As specified in the AngularJS docs only one AngularJS application can be auto-bootstrapped per HTML document. The first ng-app found in the document will be used to define the root element to auto-bootstrap as an application. If you want to use another ng-app you should manually bootstap the app.
See the angularJS docs section for the detailed explanation. https://docs.angularjs.org/api/ng/directive/ngApp
solution3
0 2016-07-20 18:16:23
From AngularJS documentation -
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. S
In your case, ng-app is limited to just one div tag. Outside this div tag, angularjs' features won't be accessible. you can have a parent div with the ng-app directive, followed by the current divs. Or simply but the directive in your body tag.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.