秦小小樱

导航

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

posted on 2018-05-30 10:26  RonnieQin  阅读(174)  评论(0编辑  收藏  举报