Question

为了标准化加载警告，并在http ajax请求返回并更改$scope项值时避免页面中的更改，我设置了一个简单的指令来包装元素并向其添加“加载”。

<loading><div>My content here</div></loading>

这转换为：

<div><div ng-hide="!ready"><div>My content here</div></div> <div ng-hide="ready">Loading...</div></div>

非常简单。然后在我的控制器中，我只需要在加载所有ajax-y时设置$scope.ready = true;。

这是我的简单指令：

    .directive('loading',function () {
    return {
        restrict: 'E',
        template: '<div><div ng-transclude ng-hide="!ready"></div><div ng-hide="ready">Loading</div></div>',
        transclude:true,
        replace:true
    };
})

问题是它对一个页面而不是另一个页面一致，即使它们的布局相同。

使用firebug进行检查时，看起来无效的那个在第一个元素上有class="ng-hide"，好像$scope.ready从未设置为true。当然，Firebug断点和控制台日志都显示它已设置为true。

我的怀疑是一个范围问题，或者可能是Angular如何应用范围变更的值，但不确定？

更新：

我在指令内部更改元素的值时，以及在控制器中更改元素时添加了消息：

// directive
            link: function ($scope) {
            $scope.$watch('ready',function (newval,oldval) {
                console.log("ready changed from "+oldval+" to "+newval);
            });
        }

// controller
console.log("changing $scope.ready to true");
$scope.ready = true;

对于有效的，我收到以下消息：

将$ scope.ready设置为true ready已从undefined更改为true

对于那个没有的，我收到以下消息：

将$ scope.ready设置为true

该指令未收到有关更改的通知。这是范围问题吗？

HTML：

我真的删除了html，仍设法重现问题：

<!-- THIS ONE HAS THE PROBLEM -->
<loading>
    <h3>{{item.name}} Second Page</h3>
</loading>

<!-- THIS ONE IS JUST FINE -->
<loading>
    <h3>{{item.name}}</h3>
</loading>

让我相信它必须是控制器中的东西？路由基本相同，除了加载不同的模板html文件和不同的控制器名称。

更新：范围是相同的。我有控制台消息从每个控制器内部和链接函数内部吐出$scope.$id（并且在手表内部，对于坏的控制器不会被调用）。在所有情况下，对于有效的页面，所有3 $id都是相同的（004），而对于没有的页面，所有3 $id都是相同的（006）。

ANOTHER：设置指令以使用scope:{ready:'=ready'}隔离范围（即双向绑定具有相同的效果。使用文本绑定@会使整个指令无法正确运行。

显然，它完全取决于项目的ID。我通过URL / items /：item加载它。如果Item是我在数据库中预先播种的那个，那么可能有一个类似“40”的ID，它对项目类型1和项目类型2都有效。如果它是一个自动生成的十六进制ID即时创建的新项目，如“8474b2486ee6”，然后它会绊倒并且不会加载。

最后......如果我点击浏览器中的“后退”按钮，它实际显示了一秒钟！

angularjs loading指令工作的一部分时间

0 个答案: