如何在 angularJS 中覆盖指令

How to overwrite a directive in angularJS

本文关键字:覆盖 指令 angularJS      更新时间:2023-09-26

这是我的 Html 页面

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

这是我的指示

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

我在控制器中编写的以下函数

$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();

但是当我单击刷新按钮时,我收到这样的错误

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) 

虽然我有一个函数"dmFail"。

任何人都可以解决我的问题吗

使用 elm.html(message) ; 或 elm.text(message); 而不是 elm.html((elm.html()||message));