如何使用多个ng-apps与多个控制器

时间:2015-07-31 11:54:10

标签: javascript html angularjs

这里我有两个ng-apps和控制器。这是我想在其他控制器中使用不同的ng-apps访问控制器值。但是我得到错误。请帮助我。

谢谢。

HTML: -

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="service.js"></script>
  </head>

  <body>
        <div id="myDiv1">
            <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 1: {{result}}</p>
            </div>
        </div>

        <div ng-app="myDiv2">
            <div ng-controller="MyController2">
              <p>Enter a number: <input type="number" ng-model="numberSecond" />
              <button ng-click="multiplyValue()">X<sup>2</sup></button>
              <p>Result 2: {{result2}}</p>
            </div>
        </div>
    </body>

</html>

Controller.js:

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);
  }
  $scope.aB=function()
  {
      alert("hiii");
  }

}]);

var mainApp2 = angular.module("mainApp2", ['mainApp']);
mainApp2.controller('MyController2',['CalcController' '$scope','$myReuseableSrvc',function(CalcController,$scope,  $myReuseableSrvc) {
  console.log('init B');
  $scope.multiplyValue = function() {
      $scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond);
         CalcController.aB(); //here i want to acess controller 'CalcController' method.
  }
}]);

这是我的傻瓜:

http://plnkr.co/edit/6QyDuV330YlgXy16S2YX?p=preview

1 个答案:

答案 0 :(得分:0)

你必须手动引导它们。

见:

  

每个HTML文档只能自动引导一个AngularJS应用程序。文档中找到的第一个ngApp将用于将自动引导的根元素定义为应用程序http://docs.angularjs.org/api/ng.directive:ngApp