如何在 angularJS 中覆盖指令
How to overwrite a directive in angularJS
这是我的 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));
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 在循环中分配json值时,值被覆盖
- 参数变量出现ngTable指令问题
- 谷歌地图固定位置覆盖
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 如何在 angularJS 中覆盖指令
- AngularJS指令数据正在被覆盖
- 控件.使用传单指令覆盖层的层折叠选项
- 如何使用带有替换的模板覆盖/补充指令中的ng类:true
- 为什么 Angular ng-cloak 即使使用自定义指令也会覆盖我的 ng-show
- 如何在不覆盖父范围的情况下将参数传递给指令
- AngularJS controllerAs在指令中,多个实例覆盖控制器方法
- 如何防止ng模型覆盖指令生成的输入文本的值
- AngularJS指令访问相同的作用域对象——避免覆盖
- 用AngularJS指令覆盖img和a的默认行为
- 自定义验证指令覆盖其他验证
- Ng-disabled覆盖自定义指令行为
- 如何创建一个自定义的angular指令来覆盖ng-disabled
- AngularJS覆盖指令控制器函数
- 为什么这个指令中的所有键绑定都被最后一个键绑定覆盖?