angularJS自定义指令scope代替link
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="scope">
<hello></hello>
<div ng-controller="h1">
<input type="text" ng-model="hh"/>
<hello1 attr1="hh"></hello1>
</div>
<hr/>
<div ng-controller="h2">
<hello2 greet="alertH(name)"></hello2>
<hello2 greet="alertH(name)"></hello2>
<hello2 greet="alertH(name)"></hello2>
</div>
</body>
<script src="angular.js"></script>
<script>
var app=angular.module("scope",[]);
app.directive("hello",function(){
return{
restrict:"AE",
scope:{},
template:"<div><input type='text' ng-model='name'/> {{name}}</div>",
replace:true
}
});
app.controller("h1",function($scope){
$scope.hh="哈哈";
});
app.directive("hello1", function(){
return{
restrict:"AE",
scope:{
//attr1:"@"//单向传递字符串
attr1:"="//双向绑定字符串
},
template:"<input type='text' ng-model='attr1'/><div>{{attr1}}</div>"
}
}); //scope & 用法
app.controller("h2",function($scope){
$scope.alertH=function(name){
alert("hello "+name);
}
});
app.directive("hello2", function(){
return{
restrict:"AE",
scope:{
//attr1:"@"//单向传递字符串
//attr1:"="//双向绑定字符串
greet:"&"//可绑定非字符串
},
template:"<input type='text' ng-model='userName'/><br/>"+
"<input type='button' value='get' ng-click='greet({name:userName})'/><br/>"
}
});
</script>
</html>
angularJS自定义指令scope代替link的更多相关文章
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJs自定义指令详解（5） - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
随机推荐
- HDU2457 DNA repair（AC自动机+DP）
题目一串DNA最少需要修改几个基因使其不包含一些致病DNA片段. 这道题应该是AC自动机+DP的入门题了,有POJ2778基础不难写出来. dp[i][j]表示原DNA前i位(在AC自动机上转移i步) ...
- BZOJ3495 : PA2010 Riddle
2-SAT. 建立n个变量,其中第i个变量表示第i个城市是否是首都. 对于边(x,y),连边x->y',y->x'. 对于一个有y个城市的国家,新建2y个变量,分别表示前i个城市和后i个城 ...
- Get function name by address in Linux
Source file: 1: #define __USE_GNU //import! 2: #include <dlfcn.h> 3: #include <stdio.h> ...
- 调用WebServiceWebService提示The maximum string content length quota (8192) has been exceeded while reading XML data的解决办法
在web.config中,bindings节点下,对应的服务名称中,原本可能是自动折叠的“/>”,需要改成手动折叠的</binding>,然后在中间加上<readerQuota ...
- 五、Pillar数据管理中心
Pillar是数据管理中心. Pillar在saltstack中主要作用是存储和定义一些配置管理中需要的信息(比如:软件版本,用户名,密码等) 修改pillar相关配置文件: [root@super6 ...
- 通过程序校验xml文档学习笔记
校验xml文档,可以通过程序来校验,利用一段js代码即可. 各行代码的含义已经写出,运行这个html文件,检验如下xml代码: 结果如下: 如果xml文档出现错误: 结果如下: 其中,obj.asyn ...
- jdk+myeclipse配置安装相关步骤
1.JDK的安装JDK 版本:7u25 安装路径:c:\java(注意:装不装公共jre都可,自己可以选择安装到哪里)环境变量配置:(1)JAVA_HOME:C:\Java(就是你安装jdk的目录 ...
- 用java简单的实现单链表的基本操作
package com.tyxh.link; //节点类 public class Node { protected Node next; //指针域 protected int data;//数据域 ...
- 内核Makefile编写
对于大部分内核模块或设备驱动的开发者和使用者来说,最常接触到的就是各层目录下基于kbuild架构的kbuild Makefile文件.主要部分有:1.目标定义,目标定义就是用来定义哪些内容要做为模块编 ...
- [ZZ]计算机视觉、机器学习相关领域论文和源代码大集合
原文地址:[ZZ]计算机视觉.机器学习相关领域论文和源代码大集合作者:计算机视觉与模式 注:下面有project网站的大部分都有paper和相应的code.Code一般是C/C++或者Matlab代码 ...