CODEWITHSUNDEEP
angularjs
Bidisha
Bidisha

Reputation: 297

AngularJs custom Directive throwing error

I am trying to add a loading gif image with a overlay while the ajax request is in progress in my angularjs app.I am using a custom directive whenever I try to load my app I get - TypeError: elm.show is not a function and TypeError: elm.hide is not a function

var app = angular.module(moduleName, [HomeModule, CommonModule, SearchModule, AnalyticsModule, 'templatecache']);
        app.config(AppConfig);
        app.directive('loading', ['$http', function ($http) {
            return {
                restrict: 'A',
                link: function ($scope, $elm, $attrs) {
                    $scope.isLoading = function () {
                        return $http.pendingRequests.length > 0;
                    };
                    $scope.$watch($scope.isLoading, function (v) {
                        if (v) {
                            $elm.show();
                        } else {
                            $elm.hide();
                        }
                    });
                }
            };
        }]);

        app.controller('appController', AppController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<body class="container-fluid" id="ng-app">

<div id="wrapper" ng-controller="appController">
    <div class="loading-dialog" data-loading>
    </div>
   <!-- <span us-spinner spinner-key="spinner-comm"></span>-->
    <div class="container-fluid" ng-controller="navTabController">...

Upvotes: 0

Views: 923

Answers (2)

Bidisha
Bidisha

Reputation: 297

Below code works instead of show() or hide() without any error : 

     scope.$watch(scope.isLoading, function (v) {
                        if (v) {
                            elm.css('display', 'block');
                        } else {
                            elm.css('display', 'none');
                        }
                    });

Upvotes: 2

taxicala
taxicala

Reputation: 21789

AngularJs uses jqLite as the selector engine, and it seems that they've dropped support for show/hide functionalities. In order to fix this you should probably include jquery in your head section or use another approach to show/hide elements.

Note that if AngularJs detects that jQuery is included, it will use jQuery instead of jqLite.

Upvotes: 1

Related Questions