Почему вывод для второго тега div отображается нормально? Почему нет привязки угловых js к нему?
Не могли бы вы объяснить мне?
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Demo</title>
<script src="/angular.min.js"></script>
<script src="/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>
-----------выход------
vijay kumar
10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }}
Из документации AngularJS -
только одно приложение AngularJS может автоматически загружаться в HTML-документ.
Другими словами, директива ng-app может использоваться только один раз во всем приложении. S
В вашем случае ng-приложение ограничено только одним тегом div. Вне этого тега div функции angularjs не будут доступны. вы можете иметь родительский div с директивой ng-app, за которым следуют текущие div. Или просто, но директива в теге тела.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Demo</title>
<script src="/angular.min.js"></script>
<script src="/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>
Как указано в документах AngularJS, только одно приложение AngularJS может автоматически загружаться в HTML-документ. Первое ng-приложение, найденное в документе, будет использоваться для определения корневого элемента для автоматической загрузки в качестве приложения. Если вы хотите использовать другое ng-приложение, вы должны вручную загрузить приложение.
Подробное объяснение см. В разделе документации angularJS. https://docs.angularjs.org/api/ng/directive/ngApp
Попробуй вот так.
var app = angular.module('myApp1', []);
app.controller('myCtrl', function($scope) {
$scope.first_name = "vijay";
$scope.last_name = "kumar";
});
<script src="/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>