AngularJs不能運行一個方法

我是一個初學者angularjs的用戶，但我必須爲我的新工作學習它，並且我認爲我可以練習一下。所以我做了一個簡單的字符串反轉方法，我想我可以做一個簡單的計算器（確切地說，只有總和）。這是我的代碼。我做了2個模塊，2個控制器，第一個工作正常，但計算器不是。然而，我做了一個簡單的網站，只有calc代碼是，它工作正常，我不明白爲什麼它的作品，但不工作，如果2個模塊在同一個網站。（是的，我是一個非常初學者）。感謝您的幫助。AngularJs不能運行一個方法

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script> 
<meta charset="UTF-8"> 
<title>Document</title> 
</head> 
<body> 
<div ng-app="MyApp" ng-controller="myController"> 
<center> 
<input type="text" ng-model="myString" placeholder="Enter text"/> 
<p>Input: {{myString }}</p> 
<p>Filtered input: {{getReverse()}}</p> 
</center> 
</div> 
<br><br> 
<center> 
<div ng-app="MyCalc" ng-controller="myCalculate"> 
<input type="text" ng-model="firstNumber"><br> 
<input type="text" ng-model="secondNumber"><br> 
<p> Result: {{getResult()}}</p> 
</div> 
</center> 


<script> 

var reverse = angular.module("MyApp", []); 
var calc = angular.module("MyCalc",[]); 



    reverse.controller('myController',function($scope){ 
     $scope.myString = ""; 
     $scope.getReverse = function(){ 
      return $scope.myString.split("").reverse().join(""); 
     } 
    }); 



    calc.controller('myCalculate',function($scope){ 
     $scope.firstNumber = 0; 
     $scope.secondNumber = 0; 
     $scope.getResult = function(){ 
      return Number($scope.firstNumber)+Number($scope.secondNumber); 
     } 
    }); 
</script>

來源

2016-08-16 Bbeni

通常情況下，你不應該在網頁中使用2角的應用程序。如果你需要使用不同的模塊，只需要依賴另一個。

比方說，你的主要模塊MyApp，你需要MyCalc的功能，你做這樣的（JsFiddle）：

var calc = angular.module("MyCalc",[]); 
calc.controller('myCalculate',function($scope){ 
    $scope.firstNumber = 0; 
    $scope.secondNumber = 0; 
    $scope.getResult = function(){ 
     return Number($scope.firstNumber)+Number($scope.secondNumber); 
    } 
}); 
// Make MyApp module depend on MyCalc 
var reverse = angular.module("MyApp", ["MyCalc"]); 
reverse.controller('myController',function($scope){ 
    $scope.myString = ""; 
    $scope.getReverse = function(){ 
     return $scope.myString.split("").reverse().join(""); 
    } 
});

然後在HTML：

<body ng-app="MyApp"> 
    <div ng-controller="myController"> 
     <center> 
      <input type="text" ng-model="myString" placeholder="Enter text"/> 
      <p>Input: {{myString }}</p> 
      <p>Filtered input: {{getReverse()}}</p> 
     </center> 
    </div> 
    <br><br> 
    <center> 
     <div ng-controller="myCalculate"> 
      <input type="text" ng-model="firstNumber"><br> 
      <input type="text" ng-model="secondNumber"><br> 
      <p> Result: {{getResult()}}</p> 
     </div> 
    </center> 
</body>

P/s：如果您確實需要在同一個網頁中引導2個角度應用程序，則需要手動引導它（JsFiddle）：

angular.bootstrap(document.getElementById('calc'), ['MyCalc']);

calc是元素，你需要引導的

<div id="calc" ng-controller="myCalculate">

第二應用的ID

來源

2016-08-16 12:37:38 Drkdra

使用NG模塊，而不是NG-應用程序，因爲NG-應用程序可以使用一個模塊在一個頁面中使用。

<div ng-module="MyModuleA"> 
<h1>Module A</h1> 
<div ng-controller="MyControllerA"> 
    {{name}} 
</div>

<div ng-module="MyModuleB"> 
<h1>Just Module B</h1> 
<div ng-controller="MyControllerB"> 
    {{name}} 
</div>

var moduleA = angular.module("MyModuleA", []); 
moduleA.controller("MyControllerA", function($scope) { 
$scope.name = "Bob A"; 
}); 

var moduleB = angular.module("MyModuleB", []); 
moduleB.controller("MyControllerB", function($scope) { 
$scope.name = "Steve B"; 
});

來源

2016-08-16 12:22:17

NG-程序指令可用於在頁面只是一個時間。

只有一個AngularJS應用程序可以爲每個HTML文檔自動引導。在文檔中找到的第一個ngApp將用於定義根元素作爲應用程序自動引導。要在HTML文檔中運行多個應用程序，您必須使用angular.bootstrap來手動引導它們。（https://docs.angularjs.org/api/ng/directive/ngApp）

但是，您可以手動引導您的應用程序。影響ID上包含的角度應用股利和添加到您的腳本（https://plnkr.co/edit/ZTW7mXx3iXm803xdYod1?p=preview）：

angular.bootstrap(document.getElementById('reverse'), ['MyApp']); 
    angular.bootstrap(document.getElementById('calc'), ['MyCalc']);

但我Vikash同意，創造更多的模塊和應用程序少:)

來源

2016-08-16 12:27:30 Silvinus

使用角度NG-模塊實現這一

這裏是工作[鏈接] [1]

[1] http://jsfiddle.net/j5jzsppv/111/

<div ng-modules="MyModuleA, MyModuleB"> 
<div ng-controller="myController"> 
<input type="text" ng-model="myString" placeholder="Enter text"/> 
    {{myString}} 
    <p>Filtered input: {{getReverse()}}</p> 
</div> 
<div ng-controller="myCalculate"> 
<input type="text" ng-model="firstNumber"><br> 
<input type="text" ng-model="secondNumber"><br> 
<p> Result: {{getResult()}}</p> 
</div>

var reverse = angular.module("MyModuleA", []); 
var calc = angular.module("MyModuleB", []); 
reverse.controller('myController', function ($scope) { 
$scope.myString = ""; 
$scope.getReverse = function() { 
    return $scope.myString.split("") 
     .reverse() 
     .join(""); 
} 
}); 
calc.controller('myCalculate', function ($scope) { 
$scope.firstNumber = 0; 
$scope.secondNumber = 0; 
$scope.getResult = function() { 
    return Number($scope.firstNumber) + Number($scope.secondNumber); 
} 
});

來源

2016-08-16 12:31:31

AngularJs不能運行一個方法

回答

相關問題