于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说明何时以及如何使用对象修饰符的更多相关文章

  1. angularjs中directive声明scope对象的用法

    总的来说用法 分三种: >1: scope: false  --> 继承父域,实现 双向数据绑定 示例代码 可自测: <!DOCTYPE html> <html lang ...

  2. AngularJS之Directive,scope,$parse

    AngularJS内幕详解之 Directive AngularJS内幕详解之 Scope AngularJS的指令(Directive) compile和link的区别及使用示例 浅谈Angular ...

  3. AngularJS Directive 隔离 Scope 数据交互

    什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...

  4. Angularjs之directive指令学习笔记(二)

    1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...

  5. angularjs的directive详解

    Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操 ...

  6. 【angularJS】Directive指令

    AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...

  7. AngularJS系统学习之Scope(作用域)

    本文出自:https://www.w3ctech.com/topic/1611 看完了没怎么懂,  也许是和别人 原文作者: Nicolas Bhttps://www.w3ctech.com/topi ...

  8. AngularJS之directive

    AngularJS之directive AngularJS是什么就不多舌了,这里简单介绍下directive.内容基本上是读书笔记,所以如果你看过<AngularJS up and runnin ...

  9. AngularJS clone directive 指令复制

    需求背景:         directive模块化某表单信息,但表单信息可加入多条.此时就涉及到clone directive. 解决方式:         能够通过使用angularjs中$com ...

随机推荐

  1. 创建一个流(Stream)可以让Bitmap或Image保存到流里面(转)

    创建一个流(Stream)可以让Bitmap或Image使用save方法将已经在bitmap上生成的图像 保存到流里面?不需要直接在硬盘上生成文件 -------------------------- ...

  2. C#(WinForm)上传图片保存到数据库和从数据库读取图片显示到窗体

    //浏览图片 private void btnUp_Click(object sender, EventArgs e) { OpenFileDialog ofd = new OpenFileDialo ...

  3. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  4. UITextField AutoComplete iOS输入框内文本自动完成

    当你打开Safari的时候,输入网址,会有许多候选网址,点击后,自动填充到输入框,进入网页. 打开词典查单词的时候,输入前面部分字母,软件会给出符合的候选单词. 这样做的目的,是为了省去用户繁琐的输入 ...

  5. Java学习----main详解

    public class Test1 { public static void main(String[] args) { System.out.println("Hello"); ...

  6. Spring+SpringMVC+Mybatis+MAVEN+Eclipse+项目完整环境搭建

    1.新建一个Maven项目,创建父项目. 2.创建子项目模块 3.创建javaWeb项目 4.创建后的项目目录结构 5.Maven文件配置 parent父项目pom.xml文件配置 <?xml ...

  7. winform 剔除空格与换行显示

    string strTeachingPlan = this.txtTeachingPlan.Text.ToString().Trim();  string[] maarr = strTeachingP ...

  8. strtolower() strtoupper()等字符串大小写转换函数

    $str = "Mary Had A Little Lamb and She LOVED It So"; string strtolower ( string $str )— 将字 ...

  9. 集合及特殊集合arrayList

    1,运用集合  arrayList 首先复制Colections加  : 创建arrayList ar =new arrayList(); ArrayList具体提供的功能:属性            ...

  10. UI基础 - UITabBarController

    self.window = [[UIWindow alloc] init]; self.window.frame = [UIScreen mainScreen].bounds; oneViewCont ...