NG angolare Fare clic su Impossibile accedere alla variabile in un ambito diverso

Question

Sono completamente nuovo a JavaScript e in particolare angolari. Ecco il mio problema, ho bisogno di chiamare la funzione ng-clic all'interno della ripetizione NG per nascondere un po 'di html al di fuori di esso.

Come capisco il problema è perché tutte le variabili (in questo caso specificamente variabili "posizioni") si trovano in un altro campo di applicazione che non posso accedere. Qualcuno può aiutarmi con il modo più breve possibile per aggirare questo problema?

Sono riuscito così lontano per finire quasi il mio sito web con solo tag HTML angolari (il che significa che non ho davvero dovuto scrivere funzioni personalizzate) e questo è l'ultimo pezzo in assoluto.

Inoltre, come capisco ogni volta che viene creato un nuovo controller in angolare, ha il suo scopo. In questo caso, tutte le chiamate (oltre a quella con cui ho problemi con) sono state fatte senza inizializzare nessuno dei controller, quindi come si accede alle variabili? C'è qualcosa come un "ambito predefinito"? So che Roothope non ha funzionato per me.

Grazie in anticipo.

.

<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

Dovrai creare un controller che circonda sia i frammenti HTML:

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

.

Il controller definisce la proprietà delle posizioni, ma dentro un altro oggetto (chiamiamolo viewState):

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

.

Quindi legare al locations interno:

<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 ragione per questo, e perché non ha funzionato per te con il $rootScope è il modo in cui gli ambiti ereditano le proprietà dei loro genitori attraverso l'ereditarietà prototipo di Javascript. Approssimativamente e davvero a breve:

Quando Leggi una proprietà da un ambito e quella scope non contiene questa proprietà, JS guarderà il suo prototipo (di nuovo molto approssimativamente parlare, la portata del genitore dell'oscillone ). La catena continua fino al $rootScope. Quindi, mettendo locations nel $rootScope comporterà la lettura positiva di questa proprietà.

Ogni volta che Scrivi Una variabile a un ambito, è scritto direttamente a tale scopo, non importa da dove è stato letto. Quindi cambiare locations nell'ambito interno non ha alcun effetto nell'ambito esterno (ad esempio $rootScope).

Mettere la variabile all'interno di un oggetto Risulta di Lettura dell'oggetto, che si risolve nell'ambito corretto, quindi scrivendo la proprietà all'oggetto corretto.

Answer 2

Questo è ciò che ho finito usando.Sembra estremamente semplice ma forse aiuterà gli altri anche gli altri che sono i principianti.Questo è fondamentalmente il codice per effettuare i valori accessibili in diversi controller.È lo stesso di Nikos suggerito se l'ho capito correttamente.

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

Questo è quello che faccio per avere una roothope accessibile.

Imposta RootsCope in App.Run: (Non dimenticare di iniettare $ Rootscope)

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

.

Creare un controller con una funzione che modifica RootsCope ($ Rootscope anche iniettato)

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

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

    }

.

Quindi questo è l'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 questo è il 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;
  }
}

.

Troverai un pinkeer funzionante qui: http://plnkr.co/edit/ygllioe55i5q8wkicc5?P= Anteprima

Non sei sicuro se questo cosa volevi.Ma spero che sia comunque. (Non urlare contro di me che questo è contro lo zen angolare, a causa delle ragioni: -)