0

I'm trying to load two ng-app modules separated with but the second module doesn't load. I use the angular.boostrap to be albe to add id to the second module, but I still get a bad code. It works on jfiddle, but not on Sublime text editor 3.

HTML:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
    <title>RuneScape Toolkit</title>
    <script     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
 </head>
  <body>

<div id="xpdef" ng-app="xpCalc" ng-controller="xpCalculatorController">
<p>Insert your current Level  <input type="number" ng-model="currentLevel"></p>
<p>Insert your desired Level <input type="number" ng-model="desiredLevel" ></p>
<h2>{{xpleft() | number}}</h2>
</div>

<br>
<div id="saycmbt" ng-app="cmbtCalc" ng-controller="CombatCalculatorController">
    <p>Insert your Attack Level  <input type="number" ng-model="ALvl"></p>
    <p>Insert your Strength Level  <input type="number" ng-model="SLvl"></p>
    <p>Insert your Magic Level  <input type="number" ng-model="MLvl"></p>
    <p>Insert your Range Level  <input type="number" ng-model="RLvl"></p>
    <p>Insert your HitPoints Level  <input type="number" ng-model="HLvl"></p>
    <p>Insert your Defense Level  <input type="number" ng-model="DLvl"></p>
    <p>Insert your Prayer Level  <input type="number" ng-model="PLvl"></p>

    <h2> {{combatlevel() | number}}  </h2>
    </div>
   <script type="text/javascript" src="xpCalc.js"></script>
   <script type="text/javascript" src="cmbtCalc.js"></script>
   </body>
   </html>

First JS:

var app = angular.module('xpCalc', []);

  app.factory('xpService',function(){
    var service = {};

  function calculate(level) {  
var output = 0;
for (var i = 1; i < level; i++) {
  output += (Math.floor(i + 300 * Math.pow(2, i / 7)) / 4);
}
return output;
}

  service.getxpLeft = function(currentLevel,desiredLevel){
var currentXp = calculate(currentLevel);
var desiredXp = calculate(desiredLevel);

 return desiredXp - currentXp;
  };

   return service;
  });

   app.controller('xpCalculatorController', function($scope,xpService) {
  $scope.currentLevel = 1;
   $scope.desiredLevel = 1;

    $scope.xpleft = function() {
    return xpService.getxpLeft($scope.currentLevel,$scope.desiredLevel);
     };
 });
angular.bootstrap(document.getElementById("xpdef"), ['cmbtCalc']);

Second JS:

var app=angular.module('cmbtCalc', []);

app.controller('CombatCalculatorController', function($scope){
$scope.Alvl = 1 ;
$scope.SLvl = 1 ;
$scope.MLvl = 1 ;
$scope.RLvl = 1 ;
$scope.HLvl = 10 ;
$scope.DLvl = 1 ;
$scope.PLvl = 1 ;

$scope.combatlevel=function(){

    return $scope.DLvl+$scope.HLvl;
};
});




angular.bootstrap(document.getElementById("saycmbt"), ['cmbtCalc']);
oto260
  • 41
  • 3
  • only 1st `ng-app` directive is considered as an entry point of application, other `ng-app` would be ignored, In such I'd say `bootstrap` all your `appModule` over particular DOM using `angular.bootstrap` method(you did it once, do it multiple time, & remove `ng-app` directive) – Pankaj Parkar Aug 28 '16 at 19:19
  • 1
    http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page – Endless Aug 28 '16 at 19:25
  • @PankajParkar what do you mean boostrap ALL appModules, I really don't understand. – oto260 Aug 28 '16 at 20:02
  • @oto260 checkout the answer, which I have referenced as duplicate.. – Pankaj Parkar Aug 28 '16 at 20:03

0 Answers0