logo标签列表

AngularJS多控制器在一个页面上

javascriptangularjsangularjs-scopecontrollers
19

我有一个页面包含多个控制器，在同一页中的两个不同的div里使用了其中一个控制器。我不确定这是否是作用域问题，或者我的代码中是否有任何遗漏。

这是plunkr链接： http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview

当用户点击“Savings”链接时，我想要隐藏文本框；当用户点击“Cost”链接时，我想要显示文本框。

5个回答
17
同一个控制器被声明两次，因此会有两个作用域。
通常的解决方案是将ng-controller声明移动到更高的dom级别（在这种情况下，只需移动到body元素上一次）并仅出现一次。否则，请查看angular服务。
请参阅更新的plunkr：http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview
11
每次使用 ng-controller，都会创建一个该控制器的新实例，具有其自己的作用域。如果您在 body 标签（或新父级）上设置 subCCtrl，并将其从当前两个 div 中删除，则它适用于我。
其他解决方案可能要考虑将 "hideThisBox" 保留在根作用域中，在单击“保存”时广播事件，或将其保存在服务中。
3

您需要在控制器和视图中进行一些更改。

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

我猜你已经得到了答案，但对于那些接下来的人，这里有一些提示^^（希望它会有所帮助）：

  • ng-controller="myCtrl" 会设置“myCtrl”控制器的一个新实例，具有自己的作用域

  • 使用的作用域将是第一个div控制器的作用域，这意味着如果你有像下面这样的东西：

         <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 的作用域与 maindiv 相同。
  • 但是，Subdiv2 将拥有其自己的 myCtrl 控制器作用域实例。
  • 从全局角度来看，Subdiv2 的作用域应该从 maindiv 的作用域中继承数据。

这只是一些简单的提示，您可以在 SO 或 Google 上找到更多有用的提示。无论如何，如果它能帮助到你们中的一些人，那就很酷了。

0
我建议你了解一下JavaScript作用域。你代码的问题在于ng-controllers的作用域。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接