0

分離された 2 つの ng-app モジュールをロードしようとしていますが、2 番目のモジュールがロードされません。angular.boostrap を使用して id を 2 番目のモジュールに追加しますが、それでもコードが正しくありません。jfiddle では動作しますが、Sublime テキスト エディター 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>

最初の 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']);

2 番目の 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']);
4

0 に答える 0