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

angular自定义指令的更多相关文章

  1. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  2. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  3. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  4. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  5. Angular17 Angular自定义指令

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...

  6. angular -- 自定义指令和模板

    angular 可以自定义一些指令,来简化我们前端的工作量. 第一种:简单指令示例: <h3>自定义指令</h3> <sheng></sheng> &l ...

  7. angular自定义指令命名的那个坑

    Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...

  8. angular自定义指令相关知识及代码

    原文地址 https://www.jianshu.com/p/0c015862156d 大纲 1.自定义指令之——属性指令 2.自定义属性指令的运行原理 3.自定义属性指令代码实践 4.自定义结构指令 ...

  9. angular自定义指令 repeat 循环结束事件;limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

随机推荐

  1. Learning by doing——百日“扇贝打卡” 历程&展望

    Java结课了.如果说这学期学习这门课后最明显的成果,那就是写了那么多的博客吧.而如果说本学期最有里程碑的事,那就是背了100多天单词,其中还获得了徽章! 这次想说说从中学以来一直喜欢的一门课--英语 ...

  2. English Voice of <<Dream it passible>>

    Dream It Possible(梦想成为可能) - DelaceyI will run I will climb I will soar.我奔跑,我攀爬 我要飞翔.I'm undefeated我所 ...

  3. 树分治TLE原因

    1.树分治有logn层,如果各层都进行一次memset相当于大小没变,可能TLE: 2.根节点全局变量会变,需要用局部变量记录,还有子树大小. 3.找根的时候的size是当前size,而不是输入数据中 ...

  4. RMQ 解决区间查询问题

    线段树写法不管,比较灵活.这里主要讨论DP实现. 其实单纯说RMQ解决的是区间最值查询是不准确的,只要满足一个区间的信息可以从它的覆盖区间获得(即[L,R]<=[L,r],[l,R] (l< ...

  5. Confluence 6 自定义你的空间

    通过对你的空间进行界面的自定义能够让你的空间更加出类拔萃. 如果你具有空间管理员权限,你可以修改你空间的颜色配色,添加你自己的空间标识,选择是否在你空间中显示边栏.或者你可以进入 Atlassian ...

  6. docker 基本操作

    # 常用命令   docker run 镜像   docker images 查看所有镜像   docke ps  查看运行中的容器 docker ps -a 列出所有容器     docker st ...

  7. Permutations CodeForces - 736D (矩阵逆)

    对于删除每个对(x,y), 可以发现他对答案的贡献为代数余子式$A_{xy}$ 复习了一下线代后发现代数余子式可以通过伴随矩阵求出, 即$A_{xy}=A^*[y][x]$, 伴随矩阵$A^*=|A| ...

  8. 338. Counting Bits_比特位计数_简单动态规划

    https://leetcode.com/problems/counting-bits/ 这是初步了解动态规划后做的第一道题,体验还不错... 看完题目要求后,写出前10个数的二进制数,发现了以下规律 ...

  9. PHP手册-函数参考-日期与时间相关扩展

    一.Calander.日期/时间.HRTime扩展的对比   Calendar 日期/时间 HRTime 简介 历法扩展集包括了一系列用于在不同历法间进行转换的函数,它是以Julian Day计数为中 ...

  10. win10 中redis client提示 ERR Client sent AUTH,but no password is set

    [问题原因]Redis服务器没有设置密码,但客户端向其发送了AUTH(authentication,身份验证)请求. [解决办法] 确定Redis启动时指定是哪个配置文件 如上图是 redis.win ...