<!DOCTYPE html>

<html ng-app="MyApp">

<head>

    <title>Study 9</title>

    <script type="text/javascript" src="js/angular.js"></script>

</head>

<body>

    <div ng-controller="testController">

        <hello say="content">Grid</hello>

    </div>

    <script type="text/javascript">

        var app = angular.module("MyApp", [], function() { });

        app.controller("testController", function($scope) {

            $scope.content = "I love you.";

        });

        app.directive("hello", function() {

            return {

                restrict: "E",

                template: "<div>hello,<b ng-transclude></b>,{{cont}}</div>",

                replace: true,

                transclude: true,

                scope: {

                    cont: "=say"

                }

            };

        });

    </script>

</body>

</html>

示例：

Angular学习（8）- directive的更多相关文章

  1. angular学习的一些小笔记(中)之directive

    directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...

  2. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  3. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  4. Angular之指令Directive系列

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

  5. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  6. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  7. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  8. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  10. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

随机推荐

  1. Qt Clipboard剪贴板简单使用

    设置剪贴板的内容 QClipboard *clipboard = QApplication::clipboard(); clipboard->setText("contents&quo ...

  2. ReentrantLock获取锁方式解读(转)

    原文地址:http://www.zhihu.com/question/36771163 (一) lock()方法获取锁.如果该锁没有被另一个线程保持,则获取该锁并立即返回,将锁的保持计数设置为 1.如 ...

  3. 机器学习技法-GBDT算法

    课程地址:https://class.coursera.org/ntumltwo-002/lecture 之前看过别人的竞赛视频,知道GBDT这个算法应用十分广泛.林在第八讲,简单的介绍了AdaBoo ...

  4. OptionParser

    给个例子: from optparse import OptionParser msg_usage = 'usage: %prog [-W] windows size [-H] h island si ...

  5. Java 最简单的计算器——使用Args参数

    public class Test{ public static void main(String[] args){ if(args.length<3){ System.out.println( ...

  6. 完全搞懂傅里叶变换和小波（2）——三个中值定理<转载>

    书接上文,本文章是该系列的第二篇,按照总纲中给出的框架,本节介绍三个中值定理,包括它们的证明及几何意义.这三个中值定理是高等数学中非常基础的部分,如果读者对于高数的内容已经非常了解,大可跳过此部分.当 ...

  7. 【转载】.NET(C#): Task.Unwrap扩展方法和async Lambda

    .NET(C#): Task.Unwrap扩展方法和async Lambda 目录 Task.Unwrap基本使用 Task.Factory.StartNew和Task.Run的Unwrap操作 使用 ...

  8. leetcode 123. Best Time to Buy and Sell Stock III ----- java

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  9. Android——ListView

    1.ArryAdapter: arry_adapter的layout文件: <?xml version="1.0" encoding="utf-8"?&g ...

  10. Ubuntu安装Mysql+Django+MySQLdb

    安装Mysql sudo apt-get install mysql-server mysql-client root@IdeaPad:/# mysql -u root -p Enter passwo ...