不同角度app的角度服务

Question

在这里，我使用的是角service.In，我的情况是，我得到了第一个应用程序的价值，而不是第二个.please帮助我。谢谢。

这是我的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);
             }
      }]);

Answer 1

您的“myController2”在错误的应用程序中

mainApp.controller('myController2'

应：

mainApp2.controller('myController2'

编辑：

啊，是的，我看到问题了。你不能像那样两次使用ng-app。如果您想要实现的是多个应用程序，那么必须“引导”第二个应用程序：

点击这里：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/