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. Effective java 系列之避免过度同步和不要使用原生态类型,优先考虑泛型

    避免过度同步(67):在一个被同步的方法或代码块中,不要调用哪些被设计成被覆盖的方法或者是由客户端以函数对象的形式提供的方法(21). 有点拗口,书上提供的创建者与观察者模式,add方法太多,看得眼花 ...

  2. Spring Batch 介绍

    在企业应用的关键环境中,通常有需要很多应用来来处理大量的应用.这商业操作包括了自动化,并且负责的处理程序来对大量数据进行高效的处理,通常这些程序不需要人工进行干预.这些事件包括有基于时间周期产生的操作 ...

  3. Confluence 6 为一个空间应用一个主题

    主题允许你对 Confluence 的外表和显示进行自定义.你的 Confluence 空间管理员可以到 The Atlassian Marketplace 上下载主题. 一旦一个主题被安装到 Con ...

  4. Confluence 6 空间

    什么是一个空间? Confluence 空间是包含有页面和博客页面的容器.你也可以将空间认为是对你工作中可以使用的 2 中类型的目录. 在 Confluence 中有下面 2 种空间类型: 站点空间( ...

  5. MyEclipse6.5的反编译插件的安装

    常用的几种反编译工具 1. JD-GUI[推荐] JD-GUI是属于Java Decompiler项目(JD项目)下个的图形化运行方式的反编译器.JD-Eclipse属于Java Decompiler ...

  6. chmod 没有x权限怎么办

    解决方法1:    # /lib64/ld-linux-x86-64.so.2 /bin/chmod 755 /bin/chmod   //linux动态命令库   解决方法2:方法2提到的两种方法形 ...

  7. 4月12 php练习

    php中输出 <?php echo'hello'; php中打印多个div <?php for($i=1;$i<=100;$i++) { ?> <div style=&q ...

  8. SecureCRT自动记录日志

    From: http://lzj0470.iteye.com/blog/1189368 今天在推特上看到有人谈起SecureCRT日志记录的问题,貌似很多人都有这习惯 我是开始工作后才使用Secure ...

  9. 函数使用七:AUTHORITY_CHECK_RFC

    此函数是用来检查用户使用RFC函数的权限 感觉是个废物,从来没遇到过这么蛋疼的权限设置,以及这么挫的检查... Import USERID                      执行RFC函数的用 ...

  10. Python---字典常用方法总结

    字典是一种key-value的数据类型,字典里必须写Key和value,字典的优点是取数方便和速度快.字典的特性: 1.字典是无序的,因为它没有下标,用key来当索引,所以是无序的 2.字典的key必 ...