2016-07-20 6 views
0

Warum zeigt der Ausgang für das zweite Div-Tag normal an? Warum gibt es keine Bindung von eckigen js mit ihm?Ausgabe für ng-app

Könnten Sie mir bitte erklären?

<!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> 

----------- ------ Ausgang

Vijay Kumar

10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }} 

Antwort

0

wie bereits.

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>

0

Als Anwendung Auto-Bootstrap pro HTML-Dokument sein kann nur ein AngularJS in dem AngularJS docs angegeben. Die erste ng-app, die im Dokument gefunden wird, wird verwendet, um das Root-Element für den automatischen Bootstrapping als Anwendung zu definieren. Wenn Sie eine andere ng-App verwenden möchten, starten Sie die App manuell.

Weitere Informationen finden Sie im Abschnitt angleJS-Dokumentation. https://docs.angularjs.org/api/ng/directive/ngApp

0

Von AngularJS documentation -

nur eine AngularJS Anwendung kann auto-Bootstrap pro HTML Dokument.

Mit anderen Worten, ng-app Direktive kann nur einmal in Ihrer gesamten Anwendung verwendet werden. S

In Ihrem Fall ist ng-app begrenzt auf zu nur einem Div-Tag. Außerhalb dieses div-Tags sind angularjs-Funktionen nicht verfügbar. Sie können ein Eltern-Div mit der ng-app-Direktive haben, gefolgt von den aktuellen Divs. Oder einfach, aber die Anweisung in Ihrem 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>