angularjs несколько контроллеров на одной странице

У меня есть страница с несколькими контроллерами, один из контроллеров используется в 2 разных divs на одной странице. Я не уверен, является ли это проблемой области или я просто пропускаю что-то в своем коде.

вот plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview

Я хочу скрыть текстовое поле, когда пользователь нажимает на ссылку "экономия", отобразите поле при нажатии на ссылку "стоимость".

19
angularjs angularjs-scope controllers javascript

5 ответов

каждый раз, когда вы используете ng-controller, вы делаете новый экземпляр указанного контроллера, с его собственной областью. Если вы установите subCCtrl в теге body (или новом родителе) и удалите его из двух divs, он работает для меня.

другие решения, которые вы можете захотеть посмотреть, - это сохранить "hideThisBox" в корневой области, транслируя событие при нажатии на save или сохраняя его в службе.

10

тот же контроллер, но объявлен дважды. поэтому -два областей.
Обычно решение состоит в том, чтобы переместить объявление ng-контроллера на один уровень dom выше (в вашем случае, для элемента body. после только), и только один раз. В противном случае посмотрите на angular services.

см. обновленный plunkr:http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview

16

вам нужно внести некоторые изменения в контроллер и вид.

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>
3

Я бы рекомендовал вам прочитать об области Javascript. Проблема с вашим кодом заключалась в области ng-controllers.

0

вы уже получили свой ответ, я думаю, но для тех, кто придет следующим, Вот несколько советов ^ ^ (надеюсь, это будет hep):

  • ng-controller="myCtrl" будет установлен новый экземпляр контроллера "myCtrl", с Я живу за собственные пределы

  • используемая область будет одним из контроллеров 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 должны иметь erited данные из области maindiv по.

это всего лишь несколько простых советов, и вы найдете более полезные на SO или google, но в любом случае, если это может помочь некоторым из вас, это будет круто.

0