angularjs于directive声明scope说明何时以及如何使用对象修饰符
于angular我们定义directive方法。查看
return {
restrict: 'AE',
scope: {},
template: '<div></div>',
link: function() {}
}
除了代码中出现的属性,另一些其它的属性可供配置,这里不作详述。
今天我们要说的重点是scope字段。
常规使用方法设置
scope: {
name: '=',
age: '=',
sex: '@',
say: '&'
}
如果我们的hml代码例如以下
<div my-directive name="myName" age="myAge" sex="male" say="say()"></div>
相应的controller部分代码
function Controller($scope) {
$scope.name = 'Pajjket';
$scope.age = 99;
$scope.sex = '我是男的';
$scope.say = function() {
alert('Hello,我是弹出消息');
};
}
那这几种修饰符的含义又是什么呢,他们怎样关联起来的
”=“:指令中的属性取值为controller中相应$scope上属性的取值,可用于双向数据的绑定
”@“:指令中的取值为html中的字面量/直接量;建立一个local scope property到DOM属性的绑定。由于属性值总是String类型。所以这个值总是返回一个字符串。
假设没有通过@attr指定属性名称,那么本地名称将与DOM属性的名称一直。比如<widget my-attr=”hello {{name}}”>,widget的scope定义为:{localName:’@myAttr’}。那么,widget scope property的localName会映射出”hello {{name}}"转换后的真实值。name属性值改变后,widget
scope的localName属性也会对应地改变(只单向,与以下的”=”不同)。name属性是在父scope读取的(不是组件scope)
”&“:指令中的取值为Contoller中相应$scope上的属性。可是这属性必须为一个函数回调
版权声明:本文博主原创文章。博客,未经同意不得转载。
angularjs于directive声明scope说明何时以及如何使用对象修饰符的更多相关文章
- angularjs中directive声明scope对象的用法
总的来说用法 分三种: >1: scope: false --> 继承父域,实现 双向数据绑定 示例代码 可自测: <!DOCTYPE html> <html lang ...
- AngularJS之Directive,scope,$parse
AngularJS内幕详解之 Directive AngularJS内幕详解之 Scope AngularJS的指令(Directive) compile和link的区别及使用示例 浅谈Angular ...
- AngularJS Directive 隔离 Scope 数据交互
什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...
- Angularjs之directive指令学习笔记(二)
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
- angularjs的directive详解
Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操 ...
- 【angularJS】Directive指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...
- AngularJS系统学习之Scope(作用域)
本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂, 也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...
- AngularJS之directive
AngularJS之directive AngularJS是什么就不多舌了,这里简单介绍下directive.内容基本上是读书笔记,所以如果你看过<AngularJS up and runnin ...
- AngularJS clone directive 指令复制
需求背景: directive模块化某表单信息,但表单信息可加入多条.此时就涉及到clone directive. 解决方式: 能够通过使用angularjs中$com ...
随机推荐
- jsp中文乱码终极解决方法(转)
一, 找出问题的根源乱码可能出现的地方: jsp页面中 jsp页面之间相互传参的参数 与数据库中数据的存取 基本归纳为以上几种. 二, 寻找解决方案 出现在jsp页面中,是由于没有设置jsp页面的中文 ...
- 说说RMAN里的obsolete
RMAN> report obsolete; RMAN retention policy will be applied to the commandRMAN retention policy ...
- 判断iPhone和iPad 判断设备版本
//判断iPhone和iPad #define IS_IPHONE (!IS_IPAD) #define IS_IPAD (UI_USER_INTERFACE_IDIOM() != UIUserInt ...
- 新修改了EMA的计算方法,合并线性回归率的计算。和通达信的结果一模一样
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- 解决Eclipse中编辑xml文件的智能提示问题,最简单的是第二种方法。
Eclipse for Android xml 文件代码自动提示功能,介绍Eclipse 编辑器中实现xml 文件代码自动智能提示功能,解决eclipse 代码提示失效.eclipse 不能自动提示. ...
- Mysql 应该选择什么引擎
对于如何选择存储引擎,可以简答的归纳为一句话:“除非需要用到某些INNODB 不具备的特性,并且没有其他办法可以替代,否则都应该选择INNODB 引擎”.例如:如果要用到全文索引,建议优先考虑INNO ...
- protobuf的反射机制
反射机制 java在运行状态时,能够知道任意类的所有属性和方法,都能够调用任意对象的任意方法和属性.这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制. C++本身没有反射机制. ...
- python+flask+mongodb+whoosh实现自己的搜索引擎(一):目录
python+flask+jieba+mongodb+whoosh实现自己的搜索引擎 一.目录 二.基于python的爬虫 三.网页去燥,URL去重 四.基于mongodb的数据存储 五.基于whoo ...
- MongoDB学习--高级查询 [聚合Group]
Group大约需要一下几个参数. key:用来分组文档的字段.和keyf两者必须有一个 keyf:可以接受一个javascript函数.用来动态的确定分组文档的字段.和key两者必须有一个 initi ...
- 30 个 php 操作 redis 常用方法代码例子
这篇文章主要介绍了 30 个 php 操作 redis 常用方法代码例子 , 本文其实不止 30 个方法 , 可以操作 string 类型. list 类型和 set 类型的数据 , 需要的朋友可以参 ...