2

我有一个文件上传指令，它在文件上传时触发事件（通过scope.$emit），然后在我的控制器中捕获（通过scope.$on）以更新进度条。文件上传指令被ng-switch删除，因此用户可以在文件上传时填写有关文件的其他信息。我希望进度条在他们执行此操作时不断更新。这在 1.0.2 版本中一切正常，但现在在 1.0.4 中似乎被破坏了。

我创建的 jsFiddle大大简化了，但它显示了问题。当页面第一次加载时，该事件被指令触发，它被控制器捕获，一切都按预期更新。但是，如果您更改下拉列表以使指令ng-switch退出，则该事件将停止被捕获。如果您查看控制台，该事件仍在 gettting $emit-ed，但控制器只是停止捕获它。即使我把它$on放在$rootScope（http://jsfiddle.net/uysAM/1/）上，它仍然有同样的问题。如果事件仍在$emit-ed 中，为什么范围会停止捕获它？

如果您将<script>顶部标签中的 src 更改为使用 1.0.2，它就可以正常工作。这是最新版本的一些新错误吗？谢谢你的帮助。

4

1 回答 1

0

这是一个范围问题。这是我的理解。

foo=1 时的作用域链

  • MyCtrl 的作用域 <- 我们在这里捕获
    • ngSwitch 的 foo="1" 范围
      • myDirective 的作用域 <- 我们在这里发出

作用域链是完整的，我们可以毫无问题地捕获发出的事件。

当 foo=2 时作用域链发生变化

  • MyCtrl 的作用域
    • null <- 被销毁并设置为 null 以进行内存管理。
      • myDirective 的作用域

范围链不再完整。发出的事件不会传播到 myDirective 清理的父范围之外。此清理可能是作为 1.0.4 中的功能添加的。

这是我对问题的解决方案。我使用 fileLoader 服务在指令和控制器之间共享状态。http://jsfiddle.net/apBZX/

var myApp = angular.module("myApp", [])

myApp.controller('MyCtrl', function ($scope, $rootScope, fileLoader) {
    $scope.$watch(function () {
        return fileLoader.numberOfloadedFiles;
    }, function (numberOfLoadedFiles) {
        $scope.numberOfLoadedFiles = numberOfLoadedFiles;
    });
    $scope.foo = 1;
});

myApp.directive("myDirective", function (fileLoader) {
    return {
        restrict: 'A',
        replace: true,
        scope: {},
        template: '<div>I am the directive</div>',
        link: function (scope, element, attrs) {
            if (!fileLoader.isLoading) {
                fileLoader.loadFiles(scope);
            }
        }
    }
});

myApp.service("fileLoader", function () {
    return {
        numberOfloadedFiles: 0,
        isLoading: false,
        loadFiles: function (scope) {
            var self = this;
            setInterval(function () {
                scope.$apply(function(){
                    self.numberOfloadedFiles++;
                });
            }, 1000);
            self.isLoading = true;
        }
    };
});
于 2013-06-21T23:57:15.080 回答