zoukankan      html  css  js  c++  java
  • 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指令的输入框元素。

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

  • 相关阅读:
    Git Revert用法
    C语言------数据输入、输出函数
    C语言------运算符和表达式
    jsp九大内置对象
    三层结构下的多表查询,实体类写法
    String类型中"=="和"equals"的区别
    创建对象数组,给数组赋值(两种理解思路)
    Vbs整人代码
    设计模式之单例
    事务
  • 原文地址:https://www.cnblogs.com/Bideam/p/6774340.html
Copyright © 2011-2022 走看看