Angular NGクリックされた範囲で変数にアクセスできません

StackOverflow https://stackoverflow.com//questions/21025452

質問

JavaScriptと特にAngularJSには全く新しいです。これが私の問題です、私はNG-Repeat内でNG-Click機能を呼び出す必要があります。

私は問題を理解しているので、すべての変数（この場合は変数 "location"）がアクセスできない別の範囲内であるためです。誰もがこの問題を回避することが可能な最短の方法で私を助けてくれることができますか？

私はこれまでのところ、角度の高いHTMLタグのみで私のウェブサイトをほとんど終了するために管理しました（私は本当にカスタム機能を書く必要がなかった意味）、これは絶対的な最後の部分です。

また、角度内の新しいコントローラが作成されるときはいつでも理解しているので、独自の範囲があります。この場合、すべてのコールが初期化されずにすべてのコールが作成されていますので、どのように変数にアクセスできますか。 「デフォルトの範囲」のようなものはありますか？私はRootscopeが私のために働かなかったことを知っています。

事前にありがとうございます。 

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

役に立ちましたか？

解決

両方のHTMLフラグメントを取り巻くコントローラを作成する必要があります。

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

コントローラは位置プロパティを定義しますが、内部別のオブジェクト（viewStateを呼び出しましょう）：

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

は内部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">
.

その理由、そしてそれが$rootScopeを使ってあなたのために働かなかった理由は、JavaScriptのプロトタイプの継承を通してスコープが両親のプロパティをどのように継承するかです。おおよそそして本当に間もなく：

read 範囲とその範囲からこのプロパティを含まない場合、JSはそのプロトタイプを調べます（再び非常に大まかに話す、スコープの親スコープ）。チェーンは$rootScopeまで続きます。したがって、locationsに$rootScopeを入れると、このプロパティの読みが成功します。

write a変数を範囲に書き込むたびに、それが読み取られた場所に関係なく、その範囲に直接書き込まれます。そのため、内部範囲内のlocationsを変更すると、外側の範囲（例えば、$rootScope）には影響しません。

オブジェクト内の変数を置くと、正しいスコープに解決された後、プロパティを正しいオブジェクトに書き込むオブジェクトを読み込みます。

他のヒント

これは私が執着したものです。それは非常にシンプルなようですが、それは初心者である他の人たちを助けるでしょう。これは基本的に異なるコントローラでアクセス可能な値を作るためのコードです。それは私が正しく理解した場合に示唆されたNikosと同じです。

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

これは私がアクセス可能なRootscopeを持っていることです。

app.runでRootscopeを設定します。（$ ROOTSCOPEを挿入することを忘れないでください）

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

rootscopeを変更する関数を持つコントローラを作成します（$ ROOTSCOPEが注入されます）

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

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

    }
.

だからこれは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>
.

とこれは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;
  }
}
.

ここでは作業プランダーを見つけるでしょう： http://plnkr.co/edit/ygllioe555q8wkicc5？P=プレビュー

あなたが欲しかったものなら誰かがよくわからない。しかし、私はそれがとにかく助けを願っています。 （これは角禅に反対していることを私に叫んだら：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top