角度服务与不同的角度应用程序(Angular service with different angular app)

在这里我使用角度服务。在我的情况下，我正在获得第一个应用程序的价值，但不是第二个。请帮助我。谢谢。

这是我的HTML： -

<div ng-app="mainApp" ng-controller="CalcController"> <p>Enter a number: <input type="number" ng-model="number" /> <button ng-click="multiply()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <div ng-app="myApp2" ng-controller="myController2"> <p>Enter a number: <input type="number" ng-model="numberSecond" /> <button ng-click="multiplyValue()">X<sup>2</sup></button> <p>Result: {{result2}}</p> </div>

这是js： -

angular.module('myReuseableMod',[]).factory('$myReuseableSrvc',function() { // code here var factory = {}; factory.multiply = function(a) { return a * a } return factory; }); var mainApp = angular.module("mainApp", ['myReuseableMod']); mainApp.controller('CalcController',['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) { alert("inside controller"); $scope.multiply = function() { alert("hello1"); $scope.result = $myReuseableSrvc.multiply($scope.number); } }]); var mainApp2 = angular.module("myApp2", ['myReuseableMod']); mainApp.controller('myController2',['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) { alert("inside controller"); $scope.multiplyValue = function() { alert("hello1"); $scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond); } }]);

Here i am using angular service.In my case i am getting value for first app but not for second .please help me . thank you.

here is my html:-

<div ng-app="mainApp" ng-controller="CalcController"> <p>Enter a number: <input type="number" ng-model="number" /> <button ng-click="multiply()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <div ng-app="myApp2" ng-controller="myController2"> <p>Enter a number: <input type="number" ng-model="numberSecond" /> <button ng-click="multiplyValue()">X<sup>2</sup></button> <p>Result: {{result2}}</p> </div>

here is js:-

angular.module('myReuseableMod',[]).factory('$myReuseableSrvc',function() { // code here var factory = {}; factory.multiply = function(a) { return a * a } return factory; }); var mainApp = angular.module("mainApp", ['myReuseableMod']); mainApp.controller('CalcController',['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) { alert("inside controller"); $scope.multiply = function() { alert("hello1"); $scope.result = $myReuseableSrvc.multiply($scope.number); } }]); var mainApp2 = angular.module("myApp2", ['myReuseableMod']); mainApp.controller('myController2',['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) { alert("inside controller"); $scope.multiplyValue = function() { alert("hello1"); $scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond); } }]);

最满意答案

你的'myController2'是错误的应用程序

mainApp.controller('myController2'

应该：

mainApp2.controller('myController2'

编辑：

啊，是的，我看到了问题。你不能两次使用ng-app。如果你想要你想要实现的是多个应用程序，你必须'bootstrap'第二个：

请点击此处： http ：//plnkr.co/edit/qfllLO9uy6bC5OLkHnYZ？ p = preview

angular.module('myReuseableMod',[]).factory('$myReuseableSrvc',function() { var factory = {}; factory.multiply = function(a) { return a * a } return factory; }); var mainApp = angular.module("mainApp", ["myReuseableMod"]); mainApp.controller('CalcController', ['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) { $scope.multiply = function() { $scope.result = $myReuseableSrvc.multiply($scope.number); } }]); var mainApp2 = angular.module("mainApp2", []); mainApp2.controller("MyController2", function($scope, $myReuseableSrvc) { console.log('init B'); $scope.multiplyValue = function() { $scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond); } }); angular.element(document).ready(function() { angular.bootstrap(document.getElementById("myDiv2"), ["mainApp2", "myReuseableMod"]); });

这是一个很好的帖子：

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

Your 'myController2' is in the wrong app

mainApp.controller('myController2'

Should be:

mainApp2.controller('myController2'

EDIT:

Ah yes I see the problem. You cannot use ng-app twice like that. If you want what you are trying to achieve which is multiple applications you have to 'bootstrap' the second one:

plunk here: http://plnkr.co/edit/qfllLO9uy6bC5OLkHnYZ?p=preview

angular.module('myReuseableMod',[]).factory('$myReuseableSrvc',function() { var factory = {}; factory.multiply = function(a) { return a * a } return factory; }); var mainApp = angular.module("mainApp", ["myReuseableMod"]); mainApp.controller('CalcController', ['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) { $scope.multiply = function() { $scope.result = $myReuseableSrvc.multiply($scope.number); } }]); var mainApp2 = angular.module("mainApp2", []); mainApp2.controller("MyController2", function($scope, $myReuseableSrvc) { console.log('init B'); $scope.multiplyValue = function() { $scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond); } }); angular.element(document).ready(function() { angular.bootstrap(document.getElementById("myDiv2"), ["mainApp2", "myReuseableMod"]); });

This is a good post to read:

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

更多推荐