Angularjs lädt einen anderen Contoler aus einer neuen Datei

Ich versuche meine Controller mit verschiedenen Dateien zu trennen. Ich habe hier geschaut und folgendes gemacht, aber ich konnte den zweiten Controller immer noch nicht aus einer neuen js-Datei laden. Ich habe versucht, diese - Angularjs Impossible to load multiply ng-apps in one page even with angular.boostrap Angularjs lädt einen anderen Contoler aus einer neuen Datei

HTML:

<!DOCTYPE html> 
    <html lang="en" ng-app="xpCalc"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>RuneScape Toolkit</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
<script type="text/javascript" src="xpCalc.js"></script> 
<script type="text/javascript" src="cmbtCalc.js"></script> 
    </head> 
    <body> 
    <div 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 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> 
</body> 
</html>

JS-Datei ONE:

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); 
     }; 
});

SECOND JS-Datei:

angular.module('xpCalc').controller('CombatCalculatorController', ["$scope", "$http", function($scope, $http){ 
$scope.ALvl = 1 ; 
$scope.SLvl = 1 ; 
$scope.MLvl = 1 ; 
$scope.RLvl = 1 ; 
$scope.HLvl = 10 ; 
$scope.DLvl = 1 ; 
$scope.PLvl = 1 ; 


    }]);

Quelle

2016-08-30 oto260

war, was ng-app = "cmbtCalc", der Code, den Sie umfasst nicht eine gezeigt haben cmbtCalc, die für diese App notwendig scheint – vileRaisin

@ vileRaisin Sorry, nur ein ng pro App, habe ich vergessen, es zu entfernen. Aber es wird immer noch nicht funktionieren – oto260

Wenn beide Dateien gleichzeitig geladen werden, Die App-Variable wird zu einer globalen Variablen und kann daher von jeder js-Datei aus aufgerufen werden, die im Moment geladen wird. (Seien Sie vorsichtig mit asynchronen)

PD. angular.module('xpCalc') kann ein anderes Modul als das der App erstellen und es kann zu Problemen führen

PD. 2: Meine lösung ist nicht getestet

Quelle

2016-08-30 10:50:54

Ich habe es entfernt, aber ich Controller funktioniert immer noch nicht – oto260

ich habe eine plunkr für ihre referenz erstellt. link. überprüfen Sie bitte Ihr Problem gor Auflösung. Sie bitte Ihren zweiten Controller ähnlich

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

}]);

Quelle

2016-08-30 12:13:21

ändert Es funktioniert gut .. Console Anweisung druckt perfekt.

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.module('xpCalc').controller('CombatCalculatorController', ["$scope", "$http", function($scope, $http){ 
 
    \t console.log('start') 
 
    
 
$scope.ALvl = 1 ; 
 
$scope.SLvl = 1 ; 
 
$scope.MLvl = 1 ; 
 
$scope.RLvl = 1 ; 
 
$scope.HLvl = 10 ; 
 
$scope.DLvl = 1 ; 
 
$scope.PLvl = 1 ; 
 
    \t console.log('end') 
 

 

 

 
    }]);

<!DOCTYPE html> 
 
    <html lang="en" ng-app="xpCalc"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>RuneScape Toolkit</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<script type="text/javascript" src="xpCalc.js"></script> 
 
<script type="text/javascript" src="cmbtCalc.js"></script> 
 
    </head> 
 
    <body> 
 
    <div 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 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> 
 
</body> 
 
</html>

Quelle

2016-08-30 12:30:04

Das Problem war ich nicht so cmbtCalc.js speicherte es nur cmbtCalc,

Quelle

2016-08-30 12:40:42 oto260

Angularjs lädt einen anderen Contoler aus einer neuen Datei

Antwort

Verwandte Themen