32

これとこれを見てきましたが、もっと簡単な方法があるようです。

私の見解では、許可によって制御されるいくつかのメニュー オプションがあります。つまり、すべての人が「ダッシュボード」ビューを表示できるわけではありません。したがって、私のビューのメニューオプションには、次のようなものがあります。

<li ng-show="validatePermission('Dashboard')">Dashboard</li>

私のコントローラーには、現在のユーザーのアクセス許可を確認する場所に validatePermission メソッドが定義されています。例えば：

  $scope.validatePermission = function(objectName) {
    if $scope.allPermissions......

また、私のコントローラーでは、$http 呼び出しを介してこれらのアクセス許可をロードしています。

  $http.get('permissions/' + userid + '.json').success(function(data) {  
    $scope.allPermissions = data;....

問題は、ビューが validatePermission を呼び出す前に $scope.allPermissions が読み込まれないことです。ビューがレンダリングされる前に allPermissions がロードされるのを待つにはどうすればよいですか?

4

5 に答える 5

21

あなたが尋ねる：

ビューがレンダリングされる前に allPermissions がロードされるのを待つにはどうすればよいですか?

ビュー全体がレンダリングされないようにするには、解決を使用する必要があります。ただし、$http は promise を返すため、promise ライブラリを使用する必要はありません。

var app = angular.module('app');

app.config(function ($routeProvider) { 
  $routeProvider
    .when('/', {
        templateUrl : 'template.html',
        controller : 'MyCtrl',
        resolve : MyCtrl.resolve
  });
});

function MyCtrl ($scope, myHttpResponse) {
   // controller logic
}

MyCtrl.resolve = {
  myHttpResponse : function($http) {
    return $http({
        method: 'GET',
        url: 'http://example.com'
    })
    .success(function(data, status) {
        // Probably no need to do anything here.
    })
    .error(function(data, status){
        // Maybe add an error message to a service here.
        // In this case your $http promise was rejected automatically and the view won't render.
    });
  }
}

しかし、単にダッシュボード <li> を非表示にしたい場合は、Joe Gauterin の提案に従ってください。必要に応じて、非常に簡単なplunkr の例を次に示します。

于 2013-05-18T02:36:28.163 に答える
10

ロードされていない場合、validatedPermission関数が false を返すようにしますallPermissions。そうすれば、あなたの要素は読み込まng-showれるまで表示されません。allPermissions

ng-show="allPermissions"または、囲んでいる<ul>orの上に an を置き<ol>ます。

于 2013-05-17T20:28:01.543 に答える
6

そのルートをレンダリングする前に、そのオブジェクトが解決されるのを待つ解決オブジェクトをルートコントローラーで指定することもできます。

角度のあるドキュメントから: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

resolve - {Object.=} - コントローラーに注入する必要がある依存関係のオプションのマップ。これらの依存関係のいずれかが promise である場合、それらは解決され、コントローラーがインスタンス化されて $routeChangeSuccess イベントが発生する前に値に変換されます。マップ オブジェクトは次のとおりです。

key – {string}: コントローラーに注入される依存関係の名前。factory - {string|function}: 文字列の場合、サービスのエイリアスです。それ以外の場合は、関数が注入され、戻り値が依存関係として扱われます。結果が promise である場合、その値がコントローラーに注入される前に解決されます。

Google グループのリファレンスも: https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw

于 2013-05-17T20:29:17.090 に答える