angularjs中的绑定策略“@”,“=”,“&”实例

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>绑定策略</title>
    <link rel="stylesheet" href="../bootstrap.min.css">
</head>
<body>
    <h4>
        AngularJS提供了几种方法能够将指令内部的隔离作用域,同指令外部的作用域进行数据绑定。
    </h4>
    为了让新的指令作用域可以访问当前本地作用域中的变量,需要使用下面三种别名中的一种(以下为官方的解释):
    <ol>
        <!--本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。-->
        <li>@ (or @attr)</li>
        <!--双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。 就像普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。 -->
        <li>= (or =attr)</li>
        <!--父级作用域绑定 通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。
        要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值 是要传递给参数的内容。-->
        <li>& (or &attr)</li>
    </ol>

    <div style="border: 1px solid red;width: 400px;height: 200px;" ng-controller="ParentController">
        <p style="color: orange;">请认真记住以下输入框中的提示文字</p>
        记住了?<input type="checkbox" ng-model="isRemember">
        <p ng-show="isRemember">
            <input type="text" ng-model="someVal" placeholder="随意输入几个值">
            并试着改变下面两个input的值
        </p>
        <div ng-show="!isRemember || someVal" my-directive one-val="{{someVal}}" two-val="someVal" three-val="parentFun(‘哈哈‘)"></div>
    </div>

    <script src="../angular.min.js"></script>
    <script>
        angular.module(‘app‘, [])
        .directive(‘myDirective‘, function() {
            return {
                restrict: ‘A‘,
                replace: true,
                scope: {
                    oneVal: ‘@oneVal‘, // 相当于“值复制”
                    twoVal: ‘=twoVal‘, // 相当于“引用复制”
                    threeVal: ‘&threeVal‘ // 绑定父作用域中的方法
                },
                template: ‘<div>‘+
                            ‘<input type="text" ng-model="oneVal" placeholder="@ 改变我其他不受影响">‘+
                            ‘<input type="text" ng-model="twoVal" placeholder="= 要是动我其他都得变">‘+
                            ‘<input type="button" ng-click="threeVal()" value="$ 点我试试">‘+
                          ‘</div>‘

            }
        })
        .controller(‘ParentController‘, function($scope) {
            $scope.parentFun = function(s) {
                alert("我成功绑定了父级作用域中的函数!" + s);
            }
        })
    </script>
</body>
</html>

以上实例可以直接运行,动手跑跑更有意思哦!

时间: 2024-10-15 03:24:23

angularjs中的绑定策略“@”,“=”,“&”实例的相关文章

解析angularjs中的绑定策略

一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值.比如 str : '@string' 控制器中代码部分示例: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 myDirec.controller('MyCtrl3',['$scope',function($scope){    $scope.ctrlFlavor=鸡尾酒;        $scope.sayHello

angularjs自定义指令绑定策略---‘&’绑定

接着上一篇 理解了"="和"@"绑定之后再来理解"&"绑定,就很简单了,同理,用"桥梁"进行分析,但还是有一些例外的情况,要不然angularjs也不会单独设定一个绑定策略,看案例先: <!DOCTYPE html><html lang="en" ng-app="MyModule"><head>    <meta charset=&quo

《AngularJS》——scope的绑定策略

scope这个对象在Angular中非常重要,可以说要想学好AngularJS,熟练使用Scope时基本功,下面介绍一下Scope的几种绑定策略. 1.@:把当前的属性作为字符串传递.你还可以绑定来自外层的scope的值,在属性值中插入{{}}即可.下面是代码. <!DOCTYPE html> <html ng-app="MyModule"> <head> <meta charset="UTF-8"> <titl

解析angularjs中的三种数据绑定策略

导入:我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去. 一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值.比如 str : '@string' 控制器中代码部分示例: myDirec.controller('MyCtrl3',['$scope',function($scope){ $scope.ctrlFlavor="鸡尾酒"; $scope.sayHello=f

angularjs 指令—— 绑定策略(@、=、&amp;)

angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 一.@ 绑定策略 @ 绑定策略,它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值.(指令属性的值可以使用表达式,但是得出来的值一定是字符串.) 1.上代码: html代码 <!DOCTYPE html> <h

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& .= .@. 首先是

AngularJS学习笔记之directive&mdash;scope选项与绑定策略

From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时

angularjs中ng-repeat-start与ng-repeat-end用法实例

angularjs中ng-repeat-start与ng-repeat-end用法实例 <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title>ng-repeat-start 与 ng-repeat-end的用法</title> <link rel=&qu

深入学习AngularJS中数据的双向绑定机制

来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中,