angularJs自定义指令时的绑定
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/angular-1.2.16.js" ></script>
</head>
<body ng-controller="dirCtr">
<input type="text" ng-model="myUrl" />
<div my-directive some-attr="{{myUrl}}" my-link-text="click here"></div>
</body>
<script type="text/javascript">
var app=angular.module("app",[]);
app.directive("myDirective",function(){
return{
restrict:"A",
replace:true,
scope:{
myUrl:'@someAttr',
myLinkText:'@myLinkText1'
},
template:'<div><input type="text" ng-model="myUrl" /><a href="{{myUrl}}">{{myUrl}}</a></div>' };
});
app.controller("dirCtr",function($scope){
$scope.myLinkText="baidu";
});
</script>
</html>
当你改变上面的输入框时,下面的输入框跟着变,但是当你改变下面的输入框时,上面的输入框不跟真变.
原因是参数scope造成了了指令的一个局部区域.
那么怎么才能输入下面的文本框,上面的也跟着变呢.
看下面的代码.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/angular-1.2.16.js" ></script>
</head>
<body>
<input type="text" ng-model="theirUrl" />
<div my-directive some-attr="theirUrl" my-link-text="click here"></div>
</body>
<script type="text/javascript">
var app=angular.module("app",[]);
app.directive("myDirective",function(){
return{
restrict:"A",
replace:true,
scope:{
myUrl:'=someAttr',
myLinkText:'@'
},
template:'<div><input type="text" ng-model="myUrl" /><a href="{{myUrl}}">{{myUrl}}</a></div>' };
});
</script>
</html>
帅呆了,酷毙的双向绑定.
angularJs自定义指令时的绑定的更多相关文章
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
随机推荐
- oracle sqlplus及常用sql语句
常用sql语句 有需求才有动力 http://blog.csdn.net/yitian20000/article/details/6256716 常用sql语句 创建表空间:create tables ...
- unity, monoDevelop ide 代码提示不起作用的解决方法
monoDevelop ide 代码提示不起作用,可能是因为ide里索引了一些不存在的文件,检查一下solution窗口里是否有文件变红,如下图中springControlEx.cs.将变红的文件re ...
- MVC 自定义异常错误页面处理
1.配置文件:webConfig中配置经常出现的错误页面: <system.web>节点下添加 <customErrors>节点,在 <customErrors>节 ...
- Saiku操作界面的简化
在安装完毕Saiku后,由于是社区版本,所以界面上存在很多升级为商业版的文字.为了使得系统不那么碍眼,可通过如下方式更改来去除相应的内容: 1.去除查询页面的升级为商业版的提示 You are usi ...
- JSP下拉选框，级联选择
前端: <%@ page contentType="text/html;charset=UTF-8" %> <!DOCTYPE html PUBLIC " ...
- astats日志分析系统
Awstats是一个免费非常简洁而且强大有个性的网站日志分析工具. 功能: 一:访问量,访问次数,页面浏览量,点击数,数据流量等 二:精确到每月.每日.每小时的数据 三:访问者国家 四:访问者IP 五 ...
- 剑指offer系列43---判断平衡二叉树
[题目]判断一颗二叉树是不是平衡二叉树. * 平衡二叉树定义:任意子节点深度相差不超过1.[思路]由上题,利用递归得到二叉树每个结点的深度同时比较. package com.exe9.offer; i ...
- 51nod 1392 装盒子
有n个长方形盒子,第i个长度为Li,宽度为Wi,我们需要把他们套放.注意一个盒子只可以套入长和宽分别不小于它的盒子,并且一个盒子里最多只能直接装入另外一个盒子 (但是可以不断嵌套),例如1 * 1 可 ...
- DNS查询指令nslookup
描述: Nslookup指令是一个查询internet域名服务的程序.Nslookup指令有两个模式:交互式和非交互式. 交互式模式允许用户查询不同种类的主机和域名或在一个域名里输出主机列表,目的是查 ...
- android学习笔记17——对话框(PopupWindow)
PopupWindow ==> PopupWindow可创建类似对话框的窗口,使用其创建对话框窗口的操作步骤: 1.调用PopupWindow构造器构造PopupWindow对象: 2.调用Po ...