Question

我正在使用AngularJS，我遇到的是ng-show崩溃我的整个网络应用程序。另一方面，使用ng-hide工作得很好。这是一个代码段：

Image.get({project_id: $scope.project.id}, function(images_data) {
    $scope.project.images = images_data.images;
    $(document).ready(function() {
        $(".fancybox").fancybox({
            openEffect: 'none',
            closeEffect: 'none'
        });
    });
    display_images();
});

和HTML：

<div ng-show="project.images.length > 0">

崩溃就来了。当我将ng-show更改为ng-show="project.images.length == 0时，一切都恢复正常。这只是美学问题，我不介意使用ng-hide，但我想知道那里发生了什么。谢谢你提前！

@edit控制台的输出是

Error: Script terminated by timeout at:
display_images/<@127.0.0.1:8000/static/app/js/app.js:50:1
jf/this.$get</n.prototype.$digest@127.0.0.1:8000/static/angularjs-1.4.2/angular.min.js:132:257
jf/this.$get</n.prototype.$apply@127.0.0.1:8000/static/angularjs-1.4.2/angular.min.js:135:267
l@127.0.0.1:8000/static/angularjs-1.4.2/angular.min.js:87:232
F@127.0.0.1:8000/static/angularjs-1.4.2/angular.min.js:91:277
Tf/</K.onload@127.0.0.1:8000/static/angularjs-1.4.2/angular.min.js:92:315
Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.2/$rootScope/inprog?p0=%24digest

我在这里发布了与代码相关的所有内容：http://pastebin.com/iqx6YsX3

Answer 1

怀疑>可能会导致问题。

您可以将决定添加到控制器中：

$scope.hasImages = function() {
    return $scope.project.images.length > 0;
}

然后：

<div ng-show="hasImages()">

Answer 2

很可能你正在处理Uncaught ReferenceError: images(or project) in not defined，为了安全起见，您可以使用以下表达式：

<div ng-show="project && project.images && project.images.length > 0">

但如果你想检查长度，那实际上就足够了

<div ng-show="project && project.images && project.images.length">

Answer 3

ngShow指令根据提供false值的表达式显示或隐藏给定的HTML元素。

无控制流语句：您不能在Angular表达式中使用以下内容：条件，循环或异常。

您无法在表达式中编写控制流语句。这背后的原因是Angular哲学的核心，即应用程序逻辑应该在控制器中，而不是视图。如果您需要一个真正的条件，循环或从视图表达式抛出，请转而委托JavaScript方法。

You can see more info from here

如果你想在UI中使用表达式你可能会得到项目或图像的未捕获的ReferenceError所以应该检查第一个项目然后检查图像然后长度

<div data-ng-show="project && project.images && project.images.length">

AngularJS ng-show崩溃了整个应用程序

3 个答案: