等到範圍變量被加載後再在angular.js的視圖中使用它

我見過this和this，但似乎可能有一個更簡單的方法。等到範圍變量被加載後再在angular.js的視圖中使用它

在我看來，我有幾個菜單選項是通過權限控制 - 即不是每個人都可以看到「Dashboard」視圖。所以在我看來，我的菜單選項，我有類似如下：

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

的問題是，$ scope.allPermissions不會被認爲品牌前裝調用validatePermission。我如何等待所有權限在視圖呈現之前加載？

來源

2013-05-17 Arthur Frankel

當allPermissions尚未加載時，validatedPermission函數是否返回false。這樣，在加載allPermissions之前，您的ng-show元素將不會顯示。

或者，將ng-show="allPermissions"放在封閉的<ul>或<ol>上。

來源

2013-05-17 20:28:01

謝謝。這是否意味着validatePermissions函數將被多次調用？即可能最初在allPermissions未加載時，那麼它會在加載後再次調用它。它如何知道再次調用它（加載後）？難道只是被稱爲一次？ –

我選擇了這個，因爲它看起來最簡單和有效 - 雖然我不是100％確定爲什麼。我猜Angular最初在顯示視圖時調用validatePermissions函數，即使allPermissions沒有加載（並且我返回false），當allPermissions被加載時它會再次調用函數 - 不知何故知道再次調用這個函數。 –

@ArthurFrankel - 是的，ng-watch中的表達式將在每個週期評估一次。 Angular作爲一個整體這樣工作 - 「ng-show」不是「顯示錶達式是否爲真」，它是「show * while表達式爲真」。其他的選擇是很好的，如果你真的需要加密，直到加載權限，但據我所知，你不在這裏。 –

您還可以在您的routecontroller上指定一個解析對象，該對象將在渲染該路線之前等待該對象解析。

從角文檔： - {對象=} - https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

解決依賴性的一個可選的映射應該被注射到控制器。如果這些依賴關係中的任何一個都是承諾，那麼它們將在控制器實例化之前解析並轉換爲值，並激發$ routeChangeSuccess事件。地圖對象是：

key - {string}：要注入控制器的依賴項的名稱。工廠 - {string | function}：如果字符串，那麼它是一個服務的別名。否則，如果函數，那麼它被注入並且返回值被視爲依賴。如果結果是承諾，則在其值被注入控制器之前解析。

阿谷歌小組的職權，以及：https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw

來源

2013-05-17 20:29:17 lucuma

解決聽起來是正確的...讓我試試這個。 –

你問：

我如何可以等待視圖呈現之前加載所有權限？

要防止整個視圖呈現，您必須使用解析。你不必雖然使用承諾庫，因爲$ HTTP返回一個承諾：

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

但是，如果你只是想隱藏儀表盤<李>，然後做喬Gauterin建議。如果你需要的話，這裏有一個非常簡單的example plunkr。

來源

2013-05-18 02:36:28

我遇到了類似的情況，你可能也想在

http://docs.angularjs.org/api/ng/directive/ngCloak

來快速瀏覽一下，如果你看到的仍然是一個「忽悠」的效果。

由於每angularjs文檔：

的ngCloak指令用於防止角HTML模板從在其原始（未編譯）形式的瀏覽器，而你的應用程序加載，略微顯示。使用此指令可避免由html模板顯示引起的不良閃爍效應。

來源

2014-03-10 23:20:56 user3403915

歡迎來到Stack Overflow！雖然這可能在理論上回答這個問題，[這將是更可取的]（http://meta.stackexchange.com/q/8259）在這裏包括答案的重要部分，並提供供參考的鏈接。 – user13500

'ng-cloak'在過去幫助過我，情況完全相同 – Sevenearths

結束語代碼NG-如果解決了該問題對我來說：

<div ng-if="dependentObject"> 
    <!-- code for dependentObject goes here --> 
</div>

來源

2016-11-16 21:33:59 WiredIn

等到範圍變量被加載後再在angular.js的視圖中使用它

回答

相關問題