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

Question

我试图使用ng-if的JavaScript表达式。 但是，它没有做任何事情。 它总是返回false 。

我尝试的是以下内容：

ng-if="localStorage.getItem('grid-layout') == 'list' （如果为true，则显示div）

div不会渲染，因为它总是返回false 。 网格布局值保存在localStorage 。 这不是问题。

我检查了网站上的文档。 Angular说以下关于ng-if

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

如果表达式是假的，那么该元素将从DOM树中删除。 如果它是真实的，则编译元素的副本被添加到DOM树中。

是否可以在ng-if使用JavaScript ？ 如果没有，我怎样才能实现我想做的事情？

Answer 1

您可以在ng-if中使用Javascript表达式，但只能访问当前模板的$scope中的属性。

除非您专门将localStorage添加到$scope对象，否则localStorage不太可能。

一种方法是在控制器中编写附加到$ scope的函数：

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

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

Answer 2

我不认为你可以在ng-if使用localstorage，因为ng-if是angular指令它只支持角度表达式。 您可以做的一件事是创建一个范围函数并返回localstorage值

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

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

Answer 3

将您的逻辑移动到控制器：

在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"

Answer 4

不需要在$scope变量中存储函数并在html中调用它。 您可以将truthy / falsy值直接存储在变量中，并将其用于ng-if ，Better并减少代码行

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

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