Question

我试图将JavaScript表达式与ng-if一起使用。但是，它没有做任何事情。它总是返回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树。

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

Answer 1

您可以在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>不太可能。{/ p>

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

height: CGFloat.greatestFiniteMagnitude

Answer 2

我认为你不能在ng-if中使用localstorage，因为ng-if是角度指令，它只支持角度表达式。您可以做的一件事是创建一个范围函数并返回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中使用它，更好并减少代码行

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

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

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

4 个答案: