如何在angularJS中覆盖指令

Question

This is my Html page

<div class="col-md-4 col-sm-4">
    <span us-spinner="{radius:15, width:5, length: 5}" spinner-key="spinner-devices"></span>
    <div class="dashboard_box box_sky" style="height: 265px;">
        <div class="media">
            <div class="media-left">
                <img src="../public/tcup/images/my_device_icon.png">
            </div>
            <div class="media-body">
                <h4>My Devices</h4>
                <dm-fail ng-show="dmFail" style='display:none;'></dm-fail>
            </div>
            <div class="media-right">
                <a href="#" ng-click="get_devicesList()" title="Refresh">
                <i class="fa fa-refresh fa-lg"></i></a>
            </div>

        </div>

    <div class="row record_box">
    <div class="col-md-6 col-sm-6 col-xs-6 record_box_left">
        <p>Devices Registered</p>
        <h1>{{AllDevicesList.length}}</h1>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6 record_box_rt">
        <p>Devices Connected</p>
        <h1>{{AllDevicesList.length - (AllDevicesList | filter:"NOT").length}}</h1>
    </div>
    </div>
    </div>
</div>

This is my directive

myDirectives.directive('dmFail', function() {

    return {
        restrict: 'E',
        replace: true,
        template: "<h6></h6>",
        link: function(scope, elm, attrs) {
            scope.dmFail = function() {

                var message= "Failed to load Device List";
                console.log(elm.attr('style'));
                elm.html((elm.html()||message));
                elm.removeAttr('style');
                elm.attr('style','color:red');

            };
        }
    };
});

The below function I have written in controller

$scope.get_devicesList = function() {
                usSpinnerService.spin('spinner-devices');
                dashboardService.getDMDetails().success(function(data, status) {
                $scope.dmFail = false;
                usSpinnerService.stop('spinner-devices');
                $scope.AllDevicesList = data.devices;
                console.log($scope.AllDevicesList);
                console.log("Success in fetching the devices list");
                }).error(function(data,status){
                usSpinnerService.stop('spinner-devices');
                $scope.dmFail();
                $scope.dmFail = true;
                })
        }
        $scope.get_devicesList();

But when I click the refresh button I get an error like this

TypeError: Property 'dmFail' of object #<Object> is not a function
    at file:///D:/newTcupDesignSushmita/TcupDashBoard/templates/services/js/controller/dashboard.js:1:4727
    at file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:95:206
    at p (file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:78:274)
    at file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:79:43
    at Object.e.$eval (file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:89:39)
    at Object.e.$digest (file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:86:442)
    at Object.e.$apply (file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:89:198)
    at e (file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:95:357)
    at p (file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:98:443)
    at XMLHttpRequest.r.onreadystatechange (file:///D:/newTcupDesignSushmita/TcupDashBoard/public/js/angular.min.js:100:49) 

Although I have a function 'dmFail'.

Could anyone solve my issue please

Answer 1

Use elm.html(message) ; or elm.text(message); instead of elm.html((elm.html()||message));