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;
                    });

                }
            };

        });
})();
时间: 2024-10-24 13:50:06

directive例子2的相关文章

AngularJS 特性—Route、Directive、Filter

Route(路由) AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).AngularJS的前端路由,需求提前对指定的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中. AngularJS的前端路由,虽然URL输入不一样,页面

vuejs心法和技法

http://www.cnblogs.com/kidsitcn/p/5409994.html 注意:本文记录作者在学习和使用vuejs开发中的点点滴滴,从vuejs1.0开始直到现在的vuejs2.0以后的版本.期中部分1.0的内容已经过时,仅作各位朋友参考,建议重点关注2.0相关的内容,会随着我对vuejs有了更多的体会后不断维护更新,也欢迎朋友们批评指正共同学习提高. 所有的vuejs组件都是被扩展的vue实例: var MyComponent = Vue.extend({ //扩展选项对象

七周七种前端框架四:Vue.js 组件和组件通信

基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist Vue 实例 一个 Vue 应用是由一个 root vue instance 引导启动的,而 Vue instance 是这么创建的: var vm = new Vue({ // optio

Angular之指令Directive系列

项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下: 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp&q

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

AngularJs 指令directive之require

controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单:另一种方法则是require AngularJS内建的指令,其中大部分时间需要require的都是ngModel这个指令. 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我们现在需要编写两 个指令,在linking函数中有很多重合的方法,为了避免重复自己

详说Angular之指令(directive)

前言 angular核心部分如下图几大块,最重要的莫过于指令这一部分,本文将重点讲解指令这一部分,后续笔者将通过陆续的学习来叙述其他如:factory.service等,若有叙述错误之处,欢迎各位指正以及批评.本文将通过一些实例来进行叙述. 话题 restrict以及replace 在sublimeText中安装angular插件之后,我们需要创建指令时此时将自动出现如下定义:所以我们将重点放在如下各个变量的定义. .directive('', ['', function(){ // Runs

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看来写官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了. <!doctype html> <html ng-app="datepickerApp"> <head> <link type="text/css" rel="stylesheet" hre

angular的canvas画图例子

angular的例子: 运行下面代码 <!DOCTYPE html><html ng-app="APP"><head>     <meta charset="UTF-8">   <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>     </head