如何在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？

回答

相关问题