zoukankan      html  css  js  c++  java
  • --@angularJS--独立作用域scope绑定策略之&符策略

    1、index.html:

    <!DOCTYPE HTML>
    <html ng-app="app">
    <head>
        <title>scopeAt</title>
        <meta charset="utf-8">    
        <link rel="stylesheet" href="../css/bootstrap.css">
        <script src="../js/angular.js"></script>
    </head>
    <body>
    <!-- 下面是指令scope作用域&符demo. -->
    <div ng-controller="myCtrl">
        <greeting gr="sayHello(name)"></greeting>
        <greeting gr="sayHello(name)"></greeting>
        <greeting gr="sayHello(name)"></greeting>
    </div>
    <script src="./scopeAnd.js"></script>
    </body>
    </html>

    2、scopeAnd.js:

    var myModule = angular.module("app",[]);

    myModule.controller('myCtrl', ['$scope', function($scope){
        $scope.sayHello = function(name){
            alert("Hello "+name);
        };
    }]);
    myModule.directive('greeting',function(){
        return {
            restrict: 'AE',
            scope:{//本来这里独立的scope是与上面的全局$scope对象是不可通信的,但是这里用了&符,那么此处的scope就变的可以接受全局$scope中定义的方法了,&符号就表示引用$scope对象中定义的方法.这里的greet:就成了上面被调用方法的别名,形参。
            // name:userName中的name就表示方法中的name形参,userNam表示实参,实参由ng-model="userName"绑定,获取文本框输入值传递进来.
                greet:'&gr'//这里绑定传递的还是属性,其实三种绑定策略传递都是属性值,@是表达式或ng-bind变量传值靠属性字串;=号是ng-model双向绑定传值靠属性;&是控制器中方法传递也靠属性,同一标签内都靠属性传递各种绑定的值.
            },
            template:'<input type="text" ng-model="userName" /><br/>'+
                     '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
        }
    });

  • 相关阅读:
    IntrospectorCleanupListener作用
    买新车流程
    EXCEL-表格安全性:加密给与不同操作权限、表格怎么不让别人复制粘贴?
    全球安全帽品牌推荐整理
    Oracle-SQL语句的语法顺序和执行顺序
    Oracle-除了会排序,你对ORDER BY的用法可能一无所知!
    EXCEL——排序函数RANK,6种花式使用技巧
    常用云盘总结
    关于运算符结合顺叙的一些小探索
    类继承小总结
  • 原文地址:https://www.cnblogs.com/koleyang/p/4516808.html
Copyright © 2011-2022 走看看