我在anugar js中实现了2个应用程序,但没有工作

时间:2016-09-01 08:57:58

标签: html angularjs

我已经在单个html页面中实现了2 ng-app而且它不适用于第二个,请查看我的代码并建议我在哪里错。

 <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
        <p>Name : <input type="text" data-ng-model="name"></p>
        <h1>Hello {{name}}</h1>


        <p> Name: <input type="text" id="first_name" ng-model="first_name"></p>
        <h1 ng-bind="first_name"></h1>


        <div ng-init="firstName='jaskaran'"  id="firstName"></div>
        <p> This is the first name:<span ng-bind="firstName"></span></p>

        <p id ="x">
            my first calculation {{5+5}}
        </p>
  </div>


        <div id="App2" ng-app="namesList" ng-controller="NamesController" >
            <input type="text" id="firstLast" ng-model="firstLast">
            Full Name: {{firstLast}} 

        </div>

脚本

var xApp = angular.module('shoppingCart',[])
xApp.controller ('ShoppingCartController', function($scope) {

}) ;

var app = angular.module('namesList',[])
app.controller('NamesController',function($scope){

      $scope.firstLast = "Nitin" ;


});

2 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序,您必须使用 angular.bootstrap 手动引导它们。

试试这个:

angular.bootstrap(document.getElementById("App2"), ['namesList']);

它将引导您的第二个ng-app指令。