<!DOCTYPE html>

<html data-ng-app="app">

    <head>

        <title>angular js</title>

        <meta charset="utf-8">

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

        <script type="text/javascript">

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

                console.log("init");

            });

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

                return {

                    restrict: "E",

                    scope: {

                        myTitle: "=myTitle"

                    },

                    template: "<input type='text' data-ng-model='myTitle' /><h1>{{myTitle}}</h1>"

                    //,replace: true 如果设置为true,template的内容要有个根容器<div><input type='text' data-ng-model='myTitle' /><h1>{{myTitle}}</h1></div>

                }

            });

            var controller = app.controller("myController",function($scope){

                $scope.ctrlTitle = "";

            });

        </script>

    </head>

    <body data-ng-controller="myController">

        <input type="text" data-ng-model="ctrlTitle" /><br/>

        <my-div my-title="ctrlTitle"></my-div>

        <script type="angular/template" id="template1">

            <h1>模板内容</h1>

        </script>

    </body>

</html>

angularjs 简单指令的更多相关文章

  1. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

  2. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

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

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

  4. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  5. AngularJs:Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

  6. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  7. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  8. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  9. angularJS自定义指令间的“沟通”

    由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...

随机推荐

  1. 我的Android进阶之旅------>adbd cannot run as root in production builds 的解决方法

    今天用adb root命令时候,报了错误:adbd cannot run as root in production builds C:\Documents and Settings\Administ ...

  2. Scilab 的画图函数（2）

    一幅图是由很多元素组成的. 包含图标题.x轴标签.y轴标签,刻度线等.图1给出了各个元素的一个示意图. 这些全部的元素在scilab中都是能够用代码控制的. 标题 上个笔记上介绍了用xtitle()函 ...

  3. SQLtie 增删该查

    建表,添加数据,更新数据,删除数据,删除表 . 先介绍三个核心方法 1.openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象. 2.transaction:这个方法允许我们根据 ...

  4. windows 和rhel，centos双系统安装

    1:首先确保你先安装为windows系统,为indows7以上的把. 2:安装好为indows系统后,进入系统后把磁盘分区,分出足够的空间为安装linux. 3:再为windows下使用软碟通等工具制 ...

  5. SAN，NAS区别的联系

    在网络存储中,有着各种网络存储解决方案,例如:SAN,NAS,DAS存储网络,它们各自有着各自的特点,其运用场景也有所不同.下面就说说各自的特点. 一.SAN SAN(Storage Area Net ...

  6. PAT 天梯赛 L1-006. 连续因子 【循环】

    题目链接 https://www.patest.cn/contests/gplt/L1-006 思路 输出的连续因子 的乘积 也要是这个数的因子 就每个数先找它的单因子 然后每个单因子往上一个一个遍历 ...

  7. Linux下32位与64位数据类型大小

    Redhat Enterprise Linux 32 Redhat Enterprise Linux 64

  8. java 分页工具类

    //13年写的,今天(17)拷贝到博客园 package com.sicdt.sicsign.web.utils; import java.io.Serializable; import java.u ...

  9. [转]u盘读不出来怎么办大汇总

    今天遇到的问题 http://www.upantool.com/jiaocheng/xiufu/2016/9958.html u盘读不出来怎么办大汇总 2016-12-14 21:42 来源: 本站整 ...

  10. HTTP协议—常见的HTTP响应状态码解析

    常见的HTTP响应状态码解析 1XX Informational(信息性状态码) 2XX Success(成功状态码) 3XX Redirection(重定向状态码) 4XX Client Error ...