如何在ng-if AngularJS中使用JavaScript？

我正在嘗試使用表達式與ng-if。但是，它沒有做任何事情。它總是返回false。如何在ng-if AngularJS中使用JavaScript？

我的嘗試是以下幾點：

ng-if="localStorage.getItem('grid-layout') == 'list'（如果爲true，秀格）

的div好好嘗試一下渲染，因爲它返回永諾false。網格佈局值保存在localStorage中。這不是問題。

我檢查了網站上的文檔。 Angular說以下有關ng-if

https://docs.angularjs.org/api/ng/directive/ngIf

如果表達式爲falsy則該元素被從DOM樹除去。如果是真的，則將已編譯元素的副本添加到 DOM樹中。

是否可以在ng-if內使用JavaScript？如果不是，我怎麼能夠實現我想要做的事情？

來源

2017-05-31 Red

你嘗試檢查'localStorage'爲'null'或'undefined'？也許你的問題在於你無法像這樣獲得'localStorage'。試試'ng-if =「localStorage」'那麼你可以排除這個原因。 – indexoutofbounds

是的，我檢查了它，它被設置爲正確的值。我用console.log和devtools裏面檢查了這兩個文件。 – Red

你檢查過html嗎？ – indexoutofbounds

您可以在ng-if中使用Javascript表達式，但只能訪問當前模板的$scope中的屬性。

localStorage將不可能爲您提供，除非您已將其專門添加到$scope對象。

一種方法是編寫附加到$範圍在你的控制器功能：

//in controller JS 
$scope.checkLocalStorage = function() { 
    return localStorage.getItem('grid-layout') == 'list'; 
} 

//In template 
<div ng-if="checkLocalStorage()"></div>

來源

2017-05-31 10:12:24 iamalismith

感謝awnser，那麼這個問題是我沒有任何控制器鏈接到該頁面。只有一個指令。但該指令在它之前被調用。 – Red

我無法將控制器添加到頁面。但是可以訪問根控制器。所以我做了你在那裏的建議。有用！謝謝。我接受時，讓我:) – Red

我不認爲你可以使用ng-if內localStorage的，因爲ng-if是角指令只支持角度表達。有一兩件事你可以做的是建立一個範圍的功能，並返回localStorage的值

ng-if="getStorage() == 'list'" 

$scope.getStorage = function(){ 
return localStorage.getItem('grid-layout'); 
}

來源

2017-05-31 10:13:26

移動你的邏輯控制器：

在HTML調用方法：

ng-if="checkForLocalStorage()"

和控制器，注入$window和寫方法等：

$scope.checkForLocalStorage = function(){ 
    return $window.localStorage.getItem('grid-layout') == 'list' 
}

進一步，更好的方法是使controller中的布爾屬性，並將其綁定到ng-if。否則由於角度摘要循環，您的方法將在每個模型\綁定更改上被調用。

你可以不喜歡它，在控制器：

$scope.isGridLayoutList= $window.localStorage.getItem('grid-layout') == 'list' ;

和HTML：ng-if="isGridLayoutList"

來源

2017-05-31 10:14:03 anoop

沒有必要存儲功能$scope變量並調用它在HTML中。您可以在一個變量直接存儲truthy/falsy值和ng-if使用它，更好，減少了代碼行

$scope.toShow = (localStorage.getItem('grid-layout') == 'list'); 

<div ng-if="toShow"></div>

來源

2017-05-31 10:17:17

很不清楚你想說什麼。什麼是LOC？ – Red

立即檢查，我已更新 –

如何在ng-if AngularJS中使用JavaScript？

回答

相關問題