Angulaire ngClick ne peut pas accéder à une variable dans un autre champ

Question

Je suis complètement nouveau pour Javascript et surtout AngularJs.Voici mon problème, j'ai besoin d'appeler ng-cliquez sur la fonction à l'intérieur de ng-repeat pour masquer un code html à l'extérieur.

Comme je comprends le problème est que toutes les variables (dans ce cas précis, la variable des "lieux") est d'une autre portée que je ne peut pas accéder.Quelqu'un peut-il m'aider avec le chemin le plus court possible pour contourner ce problème?

J'ai réussi jusqu'à présent à près de finir mon site web avec seulement angulaire des balises html (ce qui signifie que je n'ai pas vraiment eu à écrire toutes les fonctions personnalisées) et c'est l'absolu de la dernière pièce.

Aussi, comme je l'entends à chaque fois qu'un nouveau contrôleur dans angulaire est créé, il a son propre champ.Dans ce cas, tous les appels (en plus de celui que je vais avoir des problèmes avec) ont été réalisés sans l'initialisation de toutes les manettes, donc comment voulez-vous accéder à des variables?Est-il quelque chose comme une "Étendue par défaut"?Je sais rootScope ne fonctionne pas pour moi.

Je vous remercie à l'avance.

<div id="top_nav">
    <div id="top_nav_right">    
        <div id="page_header" ng-show="checked" ng-switch on="page">
        </div>  
        <a href="#" ng-click="checked = ! checked">
        </a>
    </div>      
</div>  
<div id="main_sidebar" class="check-element animate-hide" ng-show="checked">
    <ul class="menu" ng-show="!locations">
    </ul>
    <ul class="menu" ng-show="locations">
    </ul>
</div>

<div id="sub_sidebar" ng-show="checked" ng-switch on="page">
        <div ng-switch-default "check-element animate-hide">
                <div id="latest_trips_container">       
                    <div ng-controller="PostsCtrlAjax">  
                                <ul id="latest_trips" ng-controller="MyCtrl">   
                                    <li ng-repeat="post in travels">
                                                <div id="trip_details">
                                                    <a id="details" href="#/details" ng-click="locations =! locations"></a>
                                                </div>
                                    </li>
                                </ul>
                    </div>  
                </div>
        </div>              
</div>

Answer 1

Vous devrez créer un contrôleur de l'environnement à la fois des fragments de HTML:

<div ng-controller="Ctrl">
    <!-- YOUR CODE HERE -->
</div>

Le contrôleur va définir l'emplacement de la propriété, mais à l'intérieur de un autre objet (appelons-la viewState):

app.controller("Ctrl", function($scope) {
    $scope.viewState = {
        locations: false
    };
};

Alors se lier à l'intérieur locations:

<ul class="menu" ng-show="!viewState.locations">
</ul>
<ul class="menu" ng-show="viewState.locations">
</ul>
...
<a id="details" href="#/details" ng-click="viewState.locations = !viewState.locations">

---

La raison pour cela, et pourquoi il n'a pas de travail pour vous avec l' $rootScope est comment étendues hériter des propriétés de leurs parents par le biais de Javascript héritage par prototype.En gros et vraiment peu de temps:

Lorsque vous lire une propriété à partir d'une portée et champ d'application ne contient pas de cette propriété, JS va regarder son prototype (encore une fois très grossièrement en parlant, l'étendue de la portée parent).La chaîne se poursuit jusqu'à la $rootScope.Ainsi, la mise locations dans le $rootScope mènera au succès de la lecture de cette propriété.

Chaque fois que vous écrire une variable à une portée, il est écrit directement à cette étendue, peu importe où il a été lu à partir.Par conséquent, la modification locations dans l'intérieur de la portée n'a pas d'effet sur le périmètre du champ d'application (par ex. $rootScope).

Mettre la variable à l'intérieur d'un objet résultats dans la lecture de l'objet, qui se résout à la bonne portée, puis d'écrire la propriété de l'objet correct.

Answer 2

C'est ce que j'ai fini par utiliser.Il semble extrêmement simple mais peut-être que cela aidera les autres débutants aussi.Ceci est fondamentalement le code permettant de rendre les valeurs accessibles dans différents contrôleurs.C'est la même chose que les Nikos suggèrent si je l'ai bien compris.

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

    myApp.value('Pages',{page:"My Profile"});
    myApp.value('Menu',{show:false});
    myApp.value('Menu2',{show2:false});

    myApp.controller('MainMenu', function($scope,Menu,Pages) {
        $scope.menu = Menu;
        $scope.pages = Pages;
    });

    myApp.controller('MainSidebar', function($scope,Menu,Menu2,Pages) {
        $scope.menu = Menu;
        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    });

    myApp.controller('SecondSidebar', function($scope,Menu,Menu2,Pages) {
        $scope.menu = Menu;
        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    });


    myApp.controller('TripsFx', function($scope,Menu2,Pages) {

        $scope.menu2 = Menu2;
        $scope.pages = Pages;
    })

Answer 3

C'est ce que je fais pour avoir un rootcope accessible.

Configurer Rootscope dans App.Run: (N'oubliez pas d'injecter $ Rootscope)

    var myApp = angular.module('ProGen', []);
    myApp.run(function($rootScope) {
      //setup Rootscope
      $rootScope.locations = false;
    })

Créer un contrôleur avec une fonction qui change rootscope ($ rootscope injecté également)

    function someCtrl($rootScope, $scope) {
      $scope.travels = [
        {dest: 'Rome'},
        {dest: 'London'}
        ];

      $scope.flipMenu = function() {
        $rootScope.locations = !$rootScope.locations;
      }

    }

Voici donc le HTML:

    <html ng-app>
            {...}
    <body>
      <div id="main_sidebar">
        <ul class="menu" ng-show="!locations">
          <li>x1</li>
          <li>x2</li>
          <li>x3</li>
          <li>x4</li>
        </ul>
        <ul class="menu" ng-show="locations">
          <li>y1</li>
          <li>y2</li>
          <li>y3</li>
          <li>y4</li>
        </ul>
      </div>

      <div ng-click="locations =! locations">Change me (no Controller)</div>

      <div ng-controller="someCtrl">
        <ul>
          <li ng-repeat="post in travels">
            <div ng-bind="post.dest" ng-click="flipMenu()"></div>
          </li>
        </ul>
      </div>

    </body>

    </html>

Et c'est le JS:

  var myApp = angular.module('ProGen', []);
  myApp.run(function($rootScope) {
    //setup Rootscope
    $rootScope.locations = false;
  })

function someCtrl($rootScope, $scope) {
  $scope.travels = [
    {dest: 'Rome'},
    {dest: 'London'}
    ];

  $scope.flipMenu = function() {
    $rootScope.locations = !$rootScope.locations;
  }
}

Vous trouverez un plumiste de travail ici: http://plnkr.co/edit/ygllioe55ai5q8wkicc5?p= aperçu

Je ne sais pas si ce que tu voulais.Mais j'espère que cela aide quand même. (Ne criez pas sur moi que cela est contre le zen angulaire, à cause de raisons: -)