Angular ngClick não é possível acessar variáveis em um âmbito diferente

Question

Estou completamente novo para o Javascript e, especialmente, AngularJs.Aqui está o meu problema, eu preciso chamar ng-clique em função de dentro ng-repita a operação para esconder um pouco de html do lado de fora.

Como eu compreendo o problema é devido a todas as variáveis (neste caso, especificamente, a variável "localização") está em outro âmbito que não tenho acesso.Alguém pode me ajudar com o caminho mais curto possível para contornar esse problema?

Eu tenho conseguido, até agora, quase a terminar o meu site com apenas angular tags de html (ou seja, eu não tenho que escrever funções personalizadas) e este é o último pedaço.

Também, como eu o entendo sempre que um novo controlador angular é criado, ele tem seu próprio escopo.Neste caso, todas as chamadas (além do que estou a ter problemas com) foram feitas sem inicializar qualquer um dos controladores, assim como você variáveis de acesso?Existe algo como um "padrão de Escopo"?Eu sei rootScope não funcionou para mim.

Obrigado antecipadamente.

<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

Você terá que criar um controller em torno fragmentos HTML:

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

O controlador irá definir os locais de propriedade, mas dentro outro objeto (vamos chamá-lo de viewState):

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

Em seguida, ligar para o 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">

---

A razão para isso, e por que ele não funciona para você com o $rootScope é como escopos de herdar as propriedades de seus pais através de Javascript do protótipo da herança.Aproximadamente, e muito em breve:

Quando você leia uma propriedade de um escopo, e que o escopo não contém essa propriedade, JS vai olhar para o seu protótipo (de novo muito mais ou menos falando, o escopo principal escopo).A cadeia continua até o $rootScope.Então, colocando locations no $rootScope resultado será bem sucedido leitura desta propriedade.

Sempre que você escrever uma variável de escopo, é escrito diretamente para esse escopo, não importa onde ele estava leitura.Por isso, a mudança locations no âmbito interno, não tem nenhum efeito na parte externa do âmbito de aplicação (e.g. $rootScope).

Colocando a variável dentro de um objeto resulta na leitura do objeto, que resolve o escopo correto e, em seguida, preparar a propriedade para o objeto correto.

Answer 2

Isso é o que eu acabei usando.Parece extremamente simples, mas talvez possa ajudar outras pessoas que são iniciantes também.Basicamente, este é o código para fazer a valores acessíveis em diferentes controladores.É o mesmo que Nikos sugeriu que, se eu entendi corretamente.

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

Isso é o que eu faço para ter um acessíveis Rootscope.

Configurar Rootscope em app.executar:(Não se esqueça de injetar $rootScope)

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

Criar um Controlador com uma função que muda Rootscope ($rootscope injectado demasiado)

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

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

    }

Então, este é o 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>

E este é o começo:

  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;
  }
}

Você vai encontrar um trabalho Plunker aqui: http://plnkr.co/edit/ygLlIoE55aI5q8Wkicc5?p=preview

Não sei se isso o que você queria.Mas espero que ajude de qualquer maneira.(Não grite comigo que isso é contra Angular Zen, por causa de razões:-)