The page does not scroll using ng-include = "function ()" - the code is no longer used

Question

Important Editing

The problem does not occur with ng-hide , we removed this code to crash the bootstrap, but it still occurs. My next consideration is the following code snippet

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

This is the whole directive:

 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>' }; }); 

Just a brief explanation, it is literally impossible to scroll with the mouse, but you can easily insert fields.

PS: This only happens in Internet Explorer 11, that is, in the version that our client uses. In Firefox, I do not have this problem.

We replaced the code

Since an important presentation will take place tomorrow, and the missing scrollbar is really a big problem, we decided to remove the code fragment and replace it with the normal normal.

Thanks to all the commentators :)

The original question with ng-hide

I have a simple page where I hide the part with ng-hide . When ng-hide turns false , the part is displayed, but the page does not scroll randomly until I reload the entire page.

If that helps, the data that turns ng-hide to false comes from an AJAX request.

EDIT 1 - no longer relevant

Here is the code that makes HTTP requests

 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; }; 

The properties on $routescope should show a simple progress bar for each HTTP request.

Answer 1

I found a solution and it had nothing to do with ng-include . The problem was that we are using bootstrap modal, which we open like this:

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

But it does not hide properly, as a result, the body saves the modal-open class, which leads to the fact that scrolling no longer works.

Thanks to everyone who helped and invested time.

Answer 2

There are a lot of weird things in your code. $scope.watch callback will be executed when the first function returns a result different from the last when it was executed. You certainly won’t get the expected behavior with what you have: instead, just see model.key

Another problem is how you override getTemplateUrl : you should not override the function, but change what it returns as a comment from @New Dev in the comment.

Fixed directive:

 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'; } }); } 

Now your scrolling issue probably has nothing to do with it. If the template is right, but the scrolling is wrong, you should find out what causes the specific problem. To help us, we need a way to reproduce or understand the problem.

Answer 3

Perhaps this is because your ng-include is empty until your watch starts. You can try using ng-if, as this will only include your element in the DOM when the ng-if expression is true.

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