2017-03-17 120 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-应用。

相关问题