angularjs multiple controllers on one page

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 something in my code.

here is the plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview

I want to hide the textbox when the user clicks on 'Savings' link, display the box when clicking on 'Cost' link.

标签： javascript angularjs angularjs-scope controllers

5条回答

霸刀☆藐视天下

2楼-- · 2019-03-23 05:33

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) 举报

傲

3楼-- · 2019-03-23 05:38

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) 举报

小情绪 Triste *

4楼-- · 2019-03-23 05:40

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

0人赞添加讨论(0) 举报

forever°为你锁心

5楼-- · 2019-03-23 05:50

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) 举报

The star\"

6楼-- · 2019-03-23 05:53

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) 举报

angularjs multiple controllers on one page

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间