AngularJs custom Directive throwing error

Question

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">...

Bidisha · Accepted Answer · 2015-09-30 16:47:14Z

2

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

answered Sep 30, 2015 at 16:47

Bidisha

2971 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

taxicala · Accepted Answer · 2015-09-29 20:02:03Z

1

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.

answered Sep 29, 2015 at 20:02

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

1 Comment

Bidisha Over a year ago

Thanx...I wud try it that way

Collectives™ on Stack Overflow

AngularJs custom Directive throwing error

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related