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 ...
随机推荐
- 创建一个流(Stream)可以让Bitmap或Image保存到流里面(转)
创建一个流(Stream)可以让Bitmap或Image使用save方法将已经在bitmap上生成的图像 保存到流里面?不需要直接在硬盘上生成文件 -------------------------- ...
- C#(WinForm)上传图片保存到数据库和从数据库读取图片显示到窗体
//浏览图片 private void btnUp_Click(object sender, EventArgs e) { OpenFileDialog ofd = new OpenFileDialo ...
- 基于ThinkPHP+AJAX的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- UITextField AutoComplete iOS输入框内文本自动完成
当你打开Safari的时候,输入网址,会有许多候选网址,点击后,自动填充到输入框,进入网页. 打开词典查单词的时候,输入前面部分字母,软件会给出符合的候选单词. 这样做的目的,是为了省去用户繁琐的输入 ...
- Java学习----main详解
public class Test1 { public static void main(String[] args) { System.out.println("Hello"); ...
- Spring+SpringMVC+Mybatis+MAVEN+Eclipse+项目完整环境搭建
1.新建一个Maven项目,创建父项目. 2.创建子项目模块 3.创建javaWeb项目 4.创建后的项目目录结构 5.Maven文件配置 parent父项目pom.xml文件配置 <?xml ...
- winform 剔除空格与换行显示
string strTeachingPlan = this.txtTeachingPlan.Text.ToString().Trim(); string[] maarr = strTeachingP ...
- strtolower() strtoupper()等字符串大小写转换函数
$str = "Mary Had A Little Lamb and She LOVED It So"; string strtolower ( string $str )— 将字 ...
- 集合及特殊集合arrayList
1,运用集合 arrayList 首先复制Colections加 : 创建arrayList ar =new arrayList(); ArrayList具体提供的功能:属性 ...
- UI基础 - UITabBarController
self.window = [[UIWindow alloc] init]; self.window.frame = [UIScreen mainScreen].bounds; oneViewCont ...