3

$locationProviderで新しいHTMLテンプレートをレンダリングせずに、AngularJSでサービスを使用したいと思いng-viewます。

データ要素の存在へのバインドをdiv介してオンデマンドで表示される要素があります。ng-showこれをブラウザの場所に配線したいのです$locationProviderが、同じテンプレート内にとどまります。

レンプレート：

<div> other stuff ... </div>

<div ng-show="model">{{ model.element }}</div>

コントローラ：

Controller = function($scope, $location) {
  $scope.show = function() {
    $scope.model = model;    // show div
  }

  $scope.hide = function() {
    $scope.model = null;    // hide div
  }
}

$locationこれにサービスを統合する方法がわかりません。AngularJSは、history.pushState直接設定されている場合も場所を上書きします。

4

1 に答える 1

6

ソース、ルークを使用してください:-) http://code.angularjs.org/1.0.0/angular-1.0.0.js

ngViewDirective (実際には非常に単純です) を見ると、「$routeChangeSuccess」イベントをキャッチして、それに応じてビューを変更するだけです。

したがって、$routeChangeSuccess をキャッチしてから $route をコントローラーに挿入し、新しいルートが必要なものかどうかを確認し、それに応じて表示することができます。(私は思う:D)

これはうまくいくかもしれません（テストされていません）：

//declare a route so angular knows to broadcast about it when it's hit
//We aren't declaring any actions for the route though,
//since below we define custom actions
myApp.config(function($routeProvider) {
  $routeProvider.when('/superman', {});
}); 

function SupermanCtrl($scope, $route) {
  $scope.$on('$routeChangeSuccess', function() {
    //If this doesn't work, console.log $route.current to see how it's formatted
    if ($route.current == '/superman')
      $scope.show = true;
    else
      $scope.show = false;
  });
}

うまくいくことを願っています。うまくいかない場合は、最初から十分なはずです。ngViewDirective を読むことをお勧めします。これが機能しない場合は、'$routeChangeSuccess' を検索し、ブロードキャストされる方法/理由を理解してください。

于 2012-06-24T18:17:15.713 に答える