Angular ngClick no puede acceder a la variable en un ámbito diferente

Question

Soy completamente nuevo en Javascript y, especialmente, AngularJs.Aquí está mi problema, tengo que llamar a ng-haga clic en la función dentro de ng-repeat para ocultar un poco de html fuera de ella.

Como entiendo que el problema es debido a que todas las variables (en este caso específicamente de la variable "lugares") es en otro ámbito que no puedo acceder.¿Alguien puede ayudarme con el camino más corto posible para ir alrededor de este problema?

He logrado hasta ahora para casi terminar mi sitio web con sólo angular etiquetas html (lo que significa que en realidad no tiene que escribir ningún funciones personalizadas) y esto es absolutamente la última pieza.

También, como yo lo entiendo cada vez que un nuevo controlador en angular es creado, tiene su ámbito propio.En este caso, todas las llamadas (además de la que estoy teniendo problemas con el) se han realizado sin inicializar cualquiera de los controladores, así que ¿cómo se puede acceder a las variables?Hay algo como un "Ámbito predeterminado"?Sé rootScope no me funciona.

Gracias de antemano.

<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

Usted tendrá que crear un controlador de alrededor de ambos fragmentos de HTML:

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

El controlador se definen las ubicaciones de los bienes, pero dentro de otro objeto (vamos a llamar a viewState):

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

A continuación, se unen para el interior 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 razón de esto, y por qué no trabajar para usted con el $rootScope es como ámbitos de heredar las propiedades de sus padres a través de Javascript del prototipo de la herencia.Aproximadamente y realmente poco:

Cuando leer una propiedad de un alcance y de ese ámbito no contiene esta propiedad, JS se verá en su prototipo (de nuevo muy groso hablando, el alcance del ámbito primario).La cadena continúa hasta el $rootScope.Por lo tanto, poner locations en el $rootScope el resultado será la correcta lectura de esta propiedad.

Cada vez que escribir una variable a un ámbito, está escrito directamente para que alcance, sin importar de donde era leída.Lo que el cambio de locations en el interior del ámbito no tiene ningún efecto en el alcance externo (por ejemplo, $rootScope).

Poner la variable dentro de un objeto de resultados en la lectura del objeto, que se resuelve en el ámbito correcto, a continuación, la redacción de la propiedad para el objeto correcto.

Answer 2

Esto es lo que terminé usando.Parece extremadamente simple, pero tal vez ayude a otros que son principiantes también.Este es básicamente el código para realizar valores accesibles en diferentes controladores.Es lo mismo que Nikos sugirió si lo entendí correctamente.

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

Esto es lo que hago para tener un rootscope accesible.

Configurar Rootscope en App.Run: (No olvides inyectar $ ROOTSCOPE)

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

Crear un controlador con una función que cambie ROOTSCOPE ($ raotscope inyectado también)

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

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

    }

Entonces este es el 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>

y esta es la 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;
  }
}

Encontrará un plunker de trabajo aquí: http://plnkr.co/edit/ygllioe55ai5q8wkicc5?p= vista previa

No estoy seguro de si lo que quisiste.Pero espero que ayude de todos modos. (No me grites que esto es contra Zen angular, debido a las razones: -)