资讯专栏INFORMATION COLUMN

angularjs 指令scope中“=”、“@”、“&”的区别

joyvw / 3328人阅读

HTML

Parent Scope

// Update to see how parent scope interacts with component scope

Attribute

get: {{isolatedAttributeFoo}}
set: // This does not update the parent scope.
set: // This does not update the parent scope.

Binding

get: {{isolatedBindingFoo}}
set: // This does update the parent scope.

Expression

// And this calls a function on the parent scope.

JS

var myModule = angular.module("myModule", [])
    .directive("myComponent", function () {
        return {
            restrict:"E",
            scope:{
                /* NOTE: Normally I would set my attributes and bindings
                to be the same name but I wanted to delineate between 
                parent and isolated scope. */ 
                isolatedBindingString:"@attributeString",
                isolatedAttributeFoo:"@attributeFoo",
                isolatedBindingFoo:"=bindingFoo",
                isolatedExpressionFoo:"&"
            }        
        };
    })
    .controller("MyCtrl", ["$scope", function ($scope) {
        $scope.foo = "Hello!";
        $scope.updateFoo = function (newFoo) {
            $scope.foo = newFoo;
        }
    }]);

代码和效果地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50694.html

相关文章

  • angularjs 指令scope“=”、“@”、“&”区别

    HTML Parent Scope // Update to see how parent scope interacts with component scope Attribute get: {{isolatedAttributeFoo}} ...

    call_me_R 评论0 收藏0
  • 浅谈AngularJS模板

    摘要:这使得许多人并未真正了解的模板,而认为只是提供了一堆内置指令并可用于文件。是个对于模板很重要的指令,它是基本的条件表达,满足条件时则存在,不满足则不存在。则是另一重要指令,能循环创建。 showImg(http://segmentfault.com/img/bVcJtv); 作为最流行的MVVM(Model-View-View-Model)框架之一,相信大部分前端对AngularJS...

    fredshare 评论0 收藏0
  • angularJS directive用法详解

    摘要:可选参数,布尔值或者对象默认值为,可能取值默认值。布尔值或者字符,默认值为这个配置选项可以让我们提取包含在指令那个元素里面的内容,再将它放置在指令模板的特定位置。 前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下。 欢迎批评指出错误的地方。 Angularjs指令定义的API showImg(https://segmentfault.com/img...

    hlcc 评论0 收藏0
  • 创建自定义指令

    摘要:我们通常通过其区分大小写的规范化名称例如,来定义指令。在其目前的实现上,我们应该需要去创建一些不同点控制器用来重用这个指令。如此,绑定是理想的将回调函数绑定到指令行为。这被指令调用指明。前缀表示该指令在其父元素上搜索控制 文档翻译至angularjs.org. 文档解释了您何时想在AngularJS应用程序中创建自己的指令,以及如何实现它们。 | 建议搭配原文食用 | 什么是指令? 在...

    zzbo 评论0 收藏0
  • AngularJS学习笔记(2) --- 指令参数和scope绑定策略

    摘要:引言指令可以说是的核心,而其开发也是比较困难的,本文主要介绍指令的一些参数和的绑定策略。指令执行的优先级,用于多个指令同时作用于同一个元素时。改变父会影响指令,而改变指令不会影响父。在父和指令之间建立双向绑定。 引言 指令(Directive)可以说是 AngularJS 的核心,而其开发也是比较困难的,本文主要介绍指令的一些参数和scope的绑定策略。 参数 从 AngularJS ...

    AndroidTraveler 评论0 收藏0

发表评论

0条评论

joyvw

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<