javascript - 页面无法使用 ng-include 滚动 ="function()"- 该代码不再使用

Question

重要修改

ng-hide 不会出现此问题，我们删除了引导崩溃的代码，但它仍然会出现。我的下一个猜测是下面的一段代码

<div ng-include="getTemplateUrl()"></div>

这是整个指令:

stuffModule.directive('stuffDirective', function ($compile) {
    var oldId = undefined;
    return {
        restrict: 'E',
        scope: {
            model: '='
        },
        link: function (scope, elem, attrs) {
            scope.$watch(function (scope) {
                if (oldId !== scope.model.key) {
                    oldId = scope.model.key;
                    return true;
                }
                return false;
            }, function (newValue, oldValue) {
                if (scope.model.someswitch) {
                    switch (scope.model.someswitch) {
                        case 'condition1':
                            scope.getTemplateUrl = function () {
                                return 'condition1.html';
                            }
                            break;
                        case 'condition2':
                        case 'condition3':
                            scope.getTemplateUrl = function () {
                                return 'condition23.html';
                            }
                            break;
                        default:
                            break;
                    }
                } else {
                    scope.getTemplateUrl = function () {
                        return 'default.html';
                    }
                }
            });
        },
        template: '<div ng-include="getTemplateUrl()"></div>'
    };
});

只是一个简短的说明，实际上不可能用鼠标滚动，但您可以轻松地在字段中切换。

PS:它只发生在 Internet Explorer 11 中，这是我们客户使用的版本。在 Firefox 中我没有这个问题。

我们替换了代码

因为明天有一个重要的演示并且缺少滚动条是一个非常大的问题，我们决定删除这段代码并用正常的路由替换它。

感谢所有评论者:)

ng-hide 的原始问题

我有一个简单的页面，其中我使用 ng-hide 隐藏了一部分。当 ng-hide 变为 false 时，该部分会显示，但随机页面不可滚动，直到我重新加载整个页面。

如果有帮助，将 ng-hide 变为 false 的数据来自 AJAX 请求。

编辑 1 - 不再相关

这是执行 HTTP 请求的代码

this.getCall = function (url) {
    var dfd = $q.defer();
    $rootScope.loading = true;
    $rootScope.loadingError = false;
    $rootScope.progressActive = true;
    $rootScope.loadingClass = "progress-bar-info";
    $http.get('http://localhost/something', {
        cache: true
    }).success(function (data) {
        $rootScope.loadingClass = "progress-bar-success";
        $rootScope.progressActive = false;
        $timeout(function () {
            $rootScope.loading = false;
        }, 500);
        dfd.resolve(data);
    }).error(function (data, status, headers) {
        $rootScope.loading = false;
        $rootScope.loadingError = true;
        $rootScope.progressActive = false;
        $rootScope.loadingClass = "progress-bar-danger";
        console.error(data);
        dfd.reject(JSON.stringify(data));
    });
    return dfd.promise;
};

$routescope 的属性用于为每个 HTTP 请求显示一个简单的进度条。

Answer 1

您的代码中有很多地方很奇怪。 $scope.watch 回调将在第一个函数返回与上次执行时不同的结果时执行。你肯定不会用你所拥有的获得预期的行为:而只是观察 model.key

另一个问题是你重新定义 getTemplateUrl 的方式:你不应该重新定义一个函数，而是改变它返回的内容，正如@New Dev 在评论中指出的那样。

固定指令:

link: function (scope, elem, attrs) {

    // Or simply bind templateUrl in your ng-include
    scope.getTemplateUrl = function() {
      return scope.templateUrl;
    }

    scope.$watch('model.key', function (newValue) {
        if (scope.model.someswitch) {
            switch (scope.model.someswitch) {
                case 'condition1':
                    scope.templateUrl = 'condition1.html';
                    break;
                case 'condition2':
                case 'condition3':
                    scope.templateUrl = 'condition23.html';
                    break;
                default:
                    break;
            }
        } else {
            scope.templateUrl = 'default.html';
        }
    });

}

现在您的滚动问题可能与此无关。如果模板正确但滚动错误，您应该调查导致该特定问题的原因。为了让我们提供帮助，我们需要一种方法来重现或理解问题。