• Angular指令修饰符笔记


    ”=“:指令中的属性取值为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上的属性,但是这属性必须为一个函数回调

    代码示例:

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="angular.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.css" />
    <script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
    <p>Data Value:{{local}}</p>
    <p>Data Values:{{locals}}</p>
    <p>Name:{{local}},City:{{cityFn()}}</p>
    </div> 
    </script>
    <script type="text/javascript">
    angular.module("exampleApp",[])
    .directive("scopeDemo",function(){
    return{
    template:function(){
    return angular.element(
    document.querySelector("#scopeTemplate")).html();
    },
    
    scope:{
    local:"@nameprop",
    cityFn:"&city",
    locals:"=nameprops"
    }
    
    }
    })
    .controller("scopeCtrl",function($scope){
    $scope.data={name:"Adam",defaultCity:"London"};
    $scope.data={names:"Eva"};
    $scope.getCity=function(name){
    return name=="Adam" ? $scope.data.defaultCity:"Unknown";
    }
    });
    </script>
    </head>
    <body ng-controller="scopeCtrl">
    <div class="panel panel-default">
    <div class="panel-body">
    Direvt Binding:<input ng-model="data.name"></input>
    </div>
    <div class="pannel-body" scope.demo nameprop="{{data.name}}"></div>
    <div class="panel-body">
    Direvt Binding:<input ng-model="data.names"></input>
    </div>
    <div class="pannel-body" scope.demo nameprops="data.names"></div>
    <div class="panel-body">
    Direvt Binding:<input ng-model="data.name"></input>
    </div>
    <div class="pannel-body" scope.demo nameprops="data.name" city=="getCity(data.name)"></div>
    </div>
    
    </body>
    </html>

    在指令作用域内一个特性和一个属性之间的单向映射,local属性的值以一个@字符作为前缀指定了属性local的值应该从一个来自名为nameprop特性的单向绑定来获得

    在指令作用域中创建双向绑定,使用=字符作为前缀指定了locals的值与nameprop特性的双向绑定,可用于修改数据的值,只需要一个使用ng-module指令的输入框元素。

    前缀&将指定特性的值绑定到一个函数。

  • 相关阅读:
    hdu 4081 Qin Shi Huang's National Road System
    Finding Team Member
    hdu 5491 The Next
    Queue
    Backward Digit Sums
    HDU
    HDU
    CodeForces 500 A. New Year Transportation
    拓扑排序
    “玲珑杯”ACM比赛 Round #1 题解
  • 原文地址:https://www.cnblogs.com/Bideam/p/6774340.html
Copyright © 2020-2023  润新知