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不能运行一个方法

回答

相关问题