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引用的文件目录如下

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

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

转载于:https://www.cnblogs.com/RonnieQin/p/9109487.html