angularjs multiple controllers on one page

后端未结

关注

 5  948

I have a page with multiple controllers, one of the controller is being used in 2 different divs within the same page. I am not sure if it is a scope issue or I just miss someth

相关标签:

5条回答

花落未央

2021-02-12 16:14

Same controller, but declared twice. therefor - two scopes.
Normally the solution is to move the ng-controller declaration one dom level higher (in your case, to the body element. once only), and have it only once. Otherwise, look into angular services.

see updated plunkr: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview

0 讨论(0)
发布评论:

提交评论
- 加载中...
余生分开走

2021-02-12 16:29

I would recommend that you read up on Javascript scope. The issue with your code was the scope of ng-controllers.

0 讨论(0)
发布评论:

提交评论
- 加载中...

忘了有多久

2021-02-12 16:29

You already got your answer i guess, but for those who will come next here is some tips ^^ (hope it will hep):

ng-controller="myCtrl" will set a new instance of the "myCtrl" controller, with i'ts own scope
The used scope will be the one of the firt div's controller it means that if you have something like:

         <div id="maindiv" ng-controller="myCtrl>
                  <div id="subdiv1">
                      <div></div>
                      <div>
                          <div>some text</div>
                      </div>
                  </div>
                  <div id="subdiv2" ng-controller="myCtrl">
                      <div>
                          <span>-</span>
                          <span>so</span>
                          <span>this</span>
                          <span>is</span>
                          <span>a</span>
                          <span>subdiv</span>
                          <span>.</span>
                      </div>
                  </div>
              </div>
          </div>

Subdiv1 will have the same scope as maindiv
But Subdiv2 will have it's own instance of the myCtrl controller's scope.
In a global way, Subdiv2's scope should have erited is data from the maindiv's scope.

Thats just a few easy tips and you will find more usefull ones on SO, or google, but anyway, if it can help some of you it will be cool.

0 讨论(0)

日久生厌

2021-02-12 16:34

You need to make some changes in controller and view.

var app = angular.module('plunker', []);

 app.controller('subCCtrl', function($scope) {
   $scope.hideThisBox = false;
   $scope.update = function(label) {

     if (label == 'Cost')
       $scope.displaybox = true;
     else
       $scope.displaybox = false;
   }
 });
 app.controller('subACtrl', function($scope) {

 });

 app.controller('subBCtrl', function($scope) {

 });

HTML :

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body>
            <div ng-controller="subCCtrl" class="row-fluid">

                <div class="span6">
                <a href="#" ng-click='update("Cost");displaybox=true;'>Cost</a>
                <br />
                <a href="#" ng-click='update("Savings");displaybox=fasle;'>Savings</a>
                <br />

                     </div>

            <hr />
            <div ng-controller="subACtrl">Do stuff that uses subACtrl</div>
            <div ng-controller="subBCtrl">Do stuff that uses subBCtrl</div>
            <hr />
            <div ng-controller="subCCtrl" class="row-fluid">
                <div class="span3">
                    <label>If click on 'Savings', hide below box: </label>
                </div>
                  <div ng-hide="hideThisBox" class="span6">
                    <input type="text" ng-model="test2" ng-show="displaybox"/>
                </div>          
            </div>
       </div>
  </body>

</html>

0 讨论(0)

温柔的废话

2021-02-12 16:41

Every time you use ng-controller, you make a new instance of said controller, with it's own scope. If you set subCCtrl on the body tag (or a new parent), and remove it from the two divs it is currently on, it works for me.

Other solutions you might want to look in to are by keeping "hideThisBox" on the root scope, broadcasting an event when clicking on save or by keeping it in a service.

0 讨论(0)
发布评论:

提交评论
- 加载中...