angular自定义指令

时间:2023-03-09 15:36:17
angular自定义指令

1.在directive文件下创建指令的js文件

  通常自定义指令需要声明模块(注意定义指令时, js内部指令名称需采用 aaAaBb驼峰的命名方式  html中使用的是aa-aa-bb)

e.g

(function(){

    "use strict";

    var nvsAutoRefresh   = function  (){
return{ controller:function($scope,$interval,$timeout,$translate ){
//auto refesh
var autoRefresh;
$scope.changeTimeRefesh = function(){
$interval.cancel(autoRefresh);
if ($scope.intervalTime > 0) {
autoRefresh = $interval(function() {
var timeDistance = $scope.toDate - $scope.fromDate;
$scope.tDateRange = angular.copy(new Date());
$scope.fDateRange = angular.copy(new Date($scope.tDateRange.getTime() - timeDistance));
$scope.fromDate = $scope.fDateRange.getTime();
$scope.toDate = $scope.tDateRange.getTime(); $timeout(function() {
$scope.refreshPage();
})
}, $scope.intervalTime * 1000);
}
} },
restrict:'E',
templateUrl: 'src/common/directive/nvs-auto-refresh/nvs-auto-refresh.html' }; }
angular.module('nvs-auto-refresh',[])
.directive('nvsAutoRefresh',nvsAutoRefresh); })();

其中templateUrl引用的文件目录如下

angular自定义指令

2.指令创建后,在需要的template中加入指令,(注意指令定义的restrict的注入方式,以及指令名称格式的变化)

3.在app.js中注入指令所在的模块  ,还有index.html中 引入指令对应的js文件