1. 首页
  2. 问答
  3. angularjs在一个页面上的多个控制器

angularjs在一个页面上的多个控制器

2013-11-26 24 views

回答

10

每次使用NG-控制器时间，你犯了一个新的实例中所述控制器，与它自己的范围。如果您在body标签（或新的父标签）上设置了subCCtrl，并将其从当前所在的两个div中移除，则适用于我。

您可能希望查找的其他解决方案是将“hideThisBox”保留在根作用域上，单击保存或将其保存在服务中时广播事件。

来源

2013-11-26 01:58:07 kaesve

16

相同的控制器，但声明了两次。因此 - 两个范围。
通常情况下，解决方案是将ng控制器声明移到高一个等级的水平（在您的情况下，转到正文元素一次），并且只有一次。否则，请查看角度服务。

看到更新plunkr：http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview

来源

2013-11-26 01:55:22 oori

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="[email protected]" 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>

来源

2015-06-18 10:55:50

0

我建议你上的Javascript范围读了。你的代码的问题是ng-controllers的范围。

来源

2015-10-11 14:29:37

0

你已经得到了你的答案我猜，但对于那些谁还会来这里旁边是一些提示^^（希望这将HEP）：

  • ng-controller="myCtrl" 将设置“myCtrl的新实例“控制器，具有i'ts自己的范围

  • 使用的范围将是firt 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或谷歌，但无论如何，如果它可以帮助你们中的一些，它会很酷。

来源

2016-09-21 14:54:18 xoxel

相关问题

 相关问题