2017-03-17 70 views
2

您好我是新來的角,我試圖創建2個應用程序在一個HTML文件,但我沒有得到第二個應用程序的輸出,我得到適當的輸出第一個應用誰能告訴我我在哪裏做錯了?代碼如下第二個應用程序不能在角js中工作

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <title>The example for angular</title> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
      <style> 
 
       input.ng-invalid { 
 
        background-color: lightcyan; 
 
       } 
 
    
 
      </style> 
 
     </head> 
 
     <body> 
 
      <div ng-app="myApp"> 
 
       <div ng-controller="hello"> 
 
        <p>{{firstname}}</p> 
 
       </div> 
 
       <div ng-init="Akshay=[ 
 
          {firstname:'Sandeep',place:'mangalore'}, 
 
        {firstname:'sirish', place:'haridwar'}, 
 
        {firstname:'krish', place:'mathura'}]"> 
 
        <div ng-repeat="name in Akshay"> 
 
         {{name.firstname + ' ' + name.place}} 
 
        </div> 
 
       </div> 
 
       <div class="ang"></div> 
 
       <form name="myForm"> 
 
        <input type="email" name="emaild" ng-model="text"> 
 
        <span ng-show="myForm.emaild.$error.email">Please enter the proper email</span> 
 
       </form> 
 
       <input type="text" ng-model="mytext" required> 
 
      </div> 
 
    
 
      <div ng-app="Appname" ng-controller="personCtrl"> 
 
       <input type="text" ng-model="firstName"> 
 
       <input type="text" ng-model="lastName"> 
 
       <p>His firstname was{{firstName}}</p> 
 
       <p>His second name was {{lastName}} </p> 
 
       <h1> His name was {{fullname()}} </h1> 
 
    
 
      </div> 
 
      <script> 
 
       var app = angular.module("myApp", []); 
 
       app.controller("hello", function ($scope) { 
 
        $scope.firstname = "Akshay"; 
 
       }); 
 
       app.directive("ang", function() { 
 
        return { 
 
         restrict: "C", 
 
         template: "This is a great time to be alive" 
 
        }; 
 
       }); 
 
    
 
       var appsec = angular.module('Appname', []); 
 
       appsec.controller("second", function ($scope) { 
 
        $scope.firstName = "Bhagath"; 
 
        $scope.lastName = "Singh"; 
 
        $scope.fullname = function() { 
 
         return $scope.firstName + " " + $scope.lastName; 
 
        }; 
 
       }); 
 
    
 
    
 
      </script> 
 
     </body> 
 
    </html>

回答

3

你不能自舉在一個HTML文件中的兩個模塊。根據文檔

每個HTML文檔只能自動引導一個AngularJS應用程序。在文檔中找到的第一個ngApp將用於定義根元素作爲應用程序自動引導。要在HTML文檔中運行多個應用程序,您必須使用angular.bootstrap來手動引導它們。 AngularJS應用不能在彼此

2

嵌套可以使用手動自舉方法來引導兩個模塊同時

修改兩個自舉線發生當文檔已準備就緒:

angular.element(document).ready(function() { 
    angular.bootstrap(document.getElementById('app1'), ['app1']); 
    angular.bootstrap(document.getElementById('app2'), ['app2']); 
}); 

當以這種方式修改你的plnkr時,兩個應用程序開始正常工作。

現場演示:https://jsfiddle.net/samirshah1187/w7gv56t5/

0

正如@Samir說,我們可以用手動引導方法以同時引導兩個模塊,我們需要這樣定義<div ng-app="myApp" id="myId"><div ng-app="Appname" ng-controller="personCtrl" id="personId"> ID,

然後添加這些線在結束腳本內

angular.bootstrap(document.getElementById('myId'), ['myApp']); angular.bootstrap(document.getElementById('personId'), ['Appname']);

我們需要引導模塊在同一頁面內有多個NG-應用。

相關問題