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 ...
随机推荐
- APP安全防护基本方法(混淆/签名验证/反调试)
本教程所用Android Studio测试项目已上传:https://github.com/PrettyUp/SecTest 一.混淆 对于很多人而言是因为java才接触到“混淆”这个词,由于在前移动 ...
- Apache升级PHP教程(以5.3.3升级到5.6.30为例)
最简单的LAMP环境搭建当然是通过yum来安装,但由于镜像仓库中的软件版本更新较慢,经常会遇到版本过旧的问题,尤其是安装一些新版本的CMS时的PHP. 这时我们需要手动编译PHP,Linux编译安装经 ...
- linux下find命令详解
Linux中find常见用法示例 ·find path -option [ -print ] [ -exec -ok command ] {} \; find命令的参数 ...
- 【转载】Qt中图像的显示与基本操作
Qt可显示基本的图像类型,利用QImage.QPxmap类可以实现图像的显示,并且利用类中的方法可以实现图像的基本操作(缩放.旋转). 参考:Qt中图像的显示与基本操作 - ykm0722的专栏 - ...
- day04 列表
今天主要学习了 列表 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查 ...
- 使用RxSwift 实现登录页面的条件绑定
我们在使用MVC建构进行开发时,对登录页面用户名密码等进行的处理一般是这样的,点击登录按钮判断用户框以及密码框输入的合法性,用一堆if真是屎一般!或者用textfield的代理来进行响应其实也是屎一般 ...
- java中的package
java中用于存放源文件的文件夹叫做包package package中可以有源文件也可以由其他包. package的“全限定名”不是从磁盘的根目录开始的,而是从源代码的根目录开始的,以点号“.”作为分 ...
- Cracking The Coding Interview 9.0
#include <iostream> #include <vector> using namespace std; void mswap(int &a, int &a ...
- 深入理解java虚拟机---jdk8新特性(二)
1.jdk8新特性 1.新特性 2.lambda函数表达式的作用 A: 替换内部类 B:对集合的操作并行化
- 50个常用的Linux命令
1.tar tar -xvf archive_name.tar 解压文件 tar -cvf archive_name.tar file 把文件file压缩成archive_name.tar tar ...