directive例子2

(function() {
angular.module('app.widgets')
.directive('bsModalPlus', function($window, $sce, $modal) {
return {
restrict: 'A',
scope: true,
link: function(scope, element, attr, transclusion) {
// Directive options
var options = { scope: scope, element: element, show: false };
angular.forEach(['template', 'templateUrl', 'controller', 'controllerAs', 'contentTemplate', 'placement', 'backdrop', 'keyboard', 'html', 'container', 'animation', 'backdropAnimation', 'id', 'prefixEvent', 'prefixClass'], function(key) {
if (angular.isDefined(attr[key])) options[key] = attr[key];
});
// Default template url
if (!options['templateUrl'] || options['templateUrl'].length == 0)
options['templateUrl'] = 'widgets/modal/modal.template.html'
// use string regex match boolean attr falsy values, leave truthy values be
var falseValueRegExp = /^(false|0|)$/i;
angular.forEach(['backdrop', 'keyboard', 'html', 'container'], function(key) {
if (angular.isDefined(attr[key]) && falseValueRegExp.test(attr[key]))
options[key] = false;
});
// Support scope as data-attrs
angular.forEach(['title', 'content'], function(key) {
attr[key] && attr.$observe(key, function(newValue, oldValue) {
scope[key] = $sce.trustAsHtml(newValue);
});
});
//default container and placement
if (!options['container'])
options['container'] = 'body';
if (!options['backdrop'])
options['backdrop'] = 'static';
if (!options['placement'])
options['placement'] = 'center';
options['animation'] = 'am-fade-and-slide-top'
// Support scope as an object
scope.$data = {};
attr.bsModalPlus && scope.$watch(attr.bsModalPlus, function(newValue, oldValue) {
if (angular.isObject(newValue)) {
angular.extend(scope.$data, newValue);
} else {
scope.content = newValue;
}
}, true);
scope.showOkButton = !attr.showOkButton || attr.showOkButton == "true";
scope.showCloseButton = !attr.showCloseButton || attr.showCloseButton == "true";
// Initialize modal
var modal = $modal(options);
scope.$ok = function() {
if (scope.$broadcast("ok").defaultPrevented)
modal.hide();
};
scope.$close = function() {
scope.$broadcast("close");
modal.hide();
};
// Trigger
element.on(attr.trigger || 'click', modal.toggle);
// Garbage collection
scope.$on('$destroy', function() {
if (modal) modal.destroy();
options = null;
modal = null;
});
}
};
});
})();
directive例子2的更多相关文章
- directive例子1
(function() { 'use strict'; angular.module('app.widgets') .directive('confirm', ['confirm2', 'toastr ...
- vuejs心法和技法
原文地址:http://www.cnblogs.com/kidsitcn/p/5409994.html 所有的vuejs组件都是被扩展的vue实例: var MyComponent = Vue.ext ...
- AngularJS directive入门例子
这是<AngularJS>这本书里面提供的一个例子: JS代码: var expanderModule=angular.module('expanderModule', []) expan ...
- Directive间的通信
Directive间的通信 源自大漠的<AngularJS>5个实例详解Directive(指令)机制 这个例子主要的难点在于如何在子Expander里面访问外层Accordion的sco ...
- AngularJS之Directive(三)
前言 angular核心部分如下图几大块,最重要的莫过于指令这一部分,本文将重点讲解指令这一部分,后续笔者将通过陆续的学习来叙述其他如:factory.service等,若有叙述错误之处,欢迎各位指正 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- angular.js 例子
angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- [译]Exploring Angular 1.3: Binding to Directive Controllers
原文: http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html Angul ...
随机推荐
- Wireshark:No interfaces found解决方法(Windows 10)
启动Wireshark时有时会报“No interfaces found”,找不到网卡进行截包.造成这种情况的原因可能有两个,一是npf服务没启动,二是当前用启对网卡没有拦截权限. 一.npf服务未启 ...
- ubuntu分辨率
http://askubuntu.com/questions/235507/xconfig-xrandr-badmatch 先装驱动再说. 今天开机发现ubuntu分辨率不正常只有1024×768, ...
- javaweb环境搭建
首先,在开始搭建MyEclipse的开发环境之前,还有三步工具的安装需要完成,只要在安装配置成功之后才可以进入下面的java Web项目开发环境的搭建. 1.安装工具 第一步,下载并安装JDK,到官网 ...
- Java 面向对象的三大特性之一 继承
继承: Java是继承的三大特性之一,是Java中实现代码重用的手段之一 将重复的代码抽取到父类中继承的有点或者现实 优点: 方便修改代码 减少代码量 Java中继承的语法: 修饰符 SubClass ...
- GFS中文翻译
Google文件系统 GFS是一个可扩展的分布式文件系统,用于大型的.分布式的.对大量数据进行访问的应用.它运行于廉价的普通硬件上,但可以提供容错功能.它可以给大量的用户提供总体性能较高的服务. 1. ...
- 【转载】JVM系列三:JVM参数设置、分析
不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运行中断方面的问题,进而适当的提高Java ...
- node(1) npm是什么?node的异步概念
NPM是随同的NodeJS一起安装的包管理工具 他可以做什么? 1.可以从NPM服务器下载别人的东西使用 2.可以把自己的东西传到NPM服务器,让别人下载使用 淘宝的镜像会快一点 cnpm ...
- 团队项目开发特点以及NABCD分析总结
(注:此博客来源于韩晓凡,我们是一个团队) 团队项目的特点:开发的这款软件是从我们的日常生活中得到的启发,现在正是大学阶段,刚刚开始管理自己每个月的生活费,并且在大学中每个月的生活费会有很多去处,然而 ...
- 51nod1009
给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数. 例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5个1. Input 输入N( ...
- Oracle远程登录命令
sqlplus登陆方式 sqlplus有几种登陆方式 比如: 1.C: > sqlplus "/as sysdba" C: > sqlplus / as sysdba ...