AngularJS学习笔记

<!DOCTYPE html>

<html ng-app="Demo">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script src="jquery-1.8.3.min.js"></script>

    <script src="angular.min.js"></script>

    <code lines>

//失去焦点使用 jQuery 的扩展支持冒泡

app.directive('ngBlur', function($parse){

    return function($scope, $element, $attr){

        var fn = $parse($attr['ngBlur']);

        $element.on('focusout', function(event){

            fn($scope, {$event: event});

        });

    }

});

    </code>

    <div code lines>

//失去焦点使用 jQuery 的扩展支持冒泡

app.directive('ngBlur', function($parse){

    return function($scope, $element, $attr){

        var fn = $parse($attr['ngBlur']);

        $element.on('focusout', function(event){

            fn($scope, {$event: event});

        });

    }

});

    </div>

    <script>

        var app = angular.module('Demo', [], angular.noop);

        app.directive('code', function() {

            var func = function($scope, $element, $attrs) {

                var html = $element.text();

                var lines = html.split('\n');

                //处理首尾空白

                if (lines[0] == '') {lines = lines.slice(1, lines.length - 1)}

                if (lines[lines.length-1] == '') {lines = lines.slice(0, lines.length - 1)}

                $element.empty();

                //处理外框

                (function() {

                    $element.css('clear', 'both');

                    $element.css('display', 'block');

                    $element.css('line-height', '20px');

                    $element.css('height', '200px');

                })();

                //是否显示行号的选项

                if ('lines' in $attrs) {

                    //处理行号

                    (function() {

                        var div = $('<div style="width: %spx; background-color: gray; float: left; text-align: right; padding-right: 5px; margin-right: 10px;"></div>'

                        .replace('%s', String(lines.length).length * 10));

                        var s = '';

                        angular.forEach(lines, function(_, i) {

                            s += '<pre style="margin: 0;">%s</pre>\n'.replace('%s', i + 1);

                        });

                        div.html(s);

                        $element.append(div);

                    })();

                }

                //处理内容

                (function() {

                    var div = $('<div style="float: left;"></div>');

                    var s = '';

                    angular.forEach(lines, function(l) {

                        s += '<span style="margin: 0;">%s</span><br />\n'.replace('%s', l.replace(/\s/g, '<span>&nbsp;</span>'));

                    });

                    div.html(s);

                    $element.append(div);

                })();

            }

            return {

                link: func,

                restrict: 'AE' //以元素或属性的形式使用命令

            };

        });

    </script>

</body>

</html>

<!DOCTYPE html>

<html ng-app="Demo">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script src="jquery-1.8.3.min.js"></script>

    <script src="angular.min.js"></script>

    <p color="red">有颜色的文本</p>

    <color color="red">有颜色的文本</color>

    <script>

        var app = angular.module('Demo', [], angular.noop);

        app.directive('color', function() {

            var link = function($scope, $element, $attrs) {

                $element.css('color', $attrs.color);

            }

            return {

                link: link,

                restrict: 'AE'

            };

        });

    </script>

</body>

</html>

<!DOCTYPE html>

<html ng-app="Demo">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script src="jquery-1.8.3.min.js"></script>

    <script src="angular.min.js"></script>

    <div ng-controller="TestCtrl">

        <p color="color">有颜色的文本</p>

        <p color="'blue'">有颜色的文本</p>

    </div>

    <script>

        var app = angular.module('Demo', [], angular.noop);

        app.directive('color', function() {

            var link = function($scope, $element, $attrs) {

                console.log($attrs)

                $scope.$watch($attrs.color, function(new_v) {

                    console.log(new_v)

                    $element.css('color', new_v);

                });

            }

            return link;

        });

        app.controller('TestCtrl', function($scope) {

            $scope.color = 'red';

        });

    </script>

</body>

</html>

<!DOCTYPE html>

<html ng-app="Demo">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script src="jquery-1.8.3.min.js"></script>

    <script src="angular.min.js"></script>

    <div ng-controller="TestCtrl"></div>

    <div id="a">A {{ text }}</div>

    <div id="b">B </div>

    <script>

        var app = angular.module('Demo', [], angular.noop);

       app.controller('TestCtrl', function($scope, $compile) {

            var link = $compile($('#a'));

            //true参数表示新建一个完全隔离的scope,而不是继承的child scope

            var scope = $scope.$new(true);

            scope.text = '12345';

            //var node = link(scope, function(){});

            var node = link(scope);

            $('#b').append(node);

        });

    </script>

</body>

</html>

<!DOCTYPE html>

<html ng-app="Demo">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <script src="jquery-1.8.3.min.js"></script>

    <script src="angular.min.js"></script>

    <div ng-controller="TestCtrl"></div>

    <div id="a">A {{ text }}</div>

    <div id="b">B </div>

    <script>

        var app = angular.module('Demo', [], angular.noop);

       app.controller('TestCtrl', function($scope, $compile) {

            var link = $compile($('#a'));

            var scope = $scope.$new(true);

            scope.text = '12345';

            var node = link(scope, function(clone_element, scope) {

                clone_element.text(clone_element.text() + ' ...'); //无效

                clone_element.text('{{ text2 }}'); //无效

                clone_element.addClass('new_class');

            });

            $('#b').append(node);

        });

    </script>

</body>

</html>

-_-#【Angular】自定义指令directive的更多相关文章

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

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

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

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

  3. Angular自定义指令（directive）

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

  4. angular 自定义指令详解 Directive

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

  5. Angular之指令Directive系列

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...

  6. angularjs - 自定义指令(directive)

    自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...

  7. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  8. vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  9. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

随机推荐

  1. Oracle EBS 入门

    Oracle EBS 入门Oracle EBS全称是Oracle 电子商务套件(E-Business Suit),是在原来Application(ERP)基础上的扩展,包含ERP(企业资源计划管理). ...

  2. Qt 学习之路 ：Qt 线程相关类

    希望上一章有关事件循环的内容还没有把你绕晕.本章将重新回到有关线程的相关内容上面来.在前面的章节我们了解了有关QThread类的简单使用.不过,Qt 提供的有关线程的类可不那么简单,否则的话我们也没必 ...

  3. iOS开发系列之远程控制事件

    在今天的文章中还剩下最后一类事件:远程控制,远程控制事件这里主要说的就是耳机线控操作.在前面的事件列表中,大家可以看到在iOS中和远程控制事件有关的只有一个- (void)remoteControlR ...

  4. 《Android开发艺术探索》读书笔记 (9) 第9章 四大组件的工作过程

    第9章 四大组件的工作过程 9.1 四大组件的运行状态 (1)四大组件中只有BroadcastReceiver既可以在AndroidManifest文件中注册,也可以在代码中注册,其他三个组件都必须在 ...

  5. group by、order by 先后顺序问题

    今天遇到个小问题 本来是很基础的问题 应该说 基础知道掌握的不牢  好了不说 错误 语句 :   select  a.a1  from table a  where order by a.a1 gro ...

  6. oracle 自治事物 -- autonomous transaction

    一 使用规则 : 在begin 之前申明  : PRAGMA AUTONOMOUS_TRANSACTION; 二 使用理解:autonomous transaction 是一个独立的事务,这一点是理解 ...

  7. [JS] 如何清空file input框 [整理]

    测试环境:OS --> winXPBrowsers --> IE6+, FF 3.0.11, FF 3.5, Opera 9.64, Opera 10 beta 2, Safari 4, ...

  8. flash文件运动节奏的控制

    flash里面,比较难的是控制运动的节奏.参考了几个韩国网站的fla源文件,提出以下几个建议与参考. 1,flash文件里面,每秒的帧数 设置为 120,或者一个比较大的数字(90,60).普通的文件 ...

  9. 【转】 iOS开发UI篇—控制器的View的创建

    最近对view的周期等还不是非常清楚,就找到顶哥的文章,非常不错,就搬运过来了. 原文: http://www.cnblogs.com/wendingding/p/3770760.html 一.6种创 ...

  10. Swift - 22 - 循环结构

    //: Playground - noun: a place where people can play import UIKit // for-in for i in -99...99 { i * ...