页面无法使用 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>'
    };
});

只是简单说明一下，实际上不可能用鼠标滚动，但您可以轻松地在字段中进行制表。

附言：它只发生在InternetExplorer11中，那是我们客户使用的版本。在Firefox中我没有这个问题。

我们替换了代码

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

感谢所有评论：）

带ng隐藏的原始问题

我有一个简单的页面，在那里我用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';
        }
    });
}

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

Answer 2

这可能与您的ng include在手表触发之前为空有关。您可以尝试使用ng-if，因为只有当ng-if表达式为true时，它才会将您的元素包含在DOM中。

template: '<div ng-if="!whatever you had in your ng-hide" ng-include="getTemplateUrl()"></div>'

Answer 3

我找到了解决方案，它与ng-include无关。问题是，我们使用了一个像这样打开的引导模式：

$('#modal').modal('show');

但它没有正确隐藏，结果是主体保留了类modal-open，这导致滚动不再工作。

感谢所有帮助和投入时间的人。