[转]AngularJS 作用域数据绑定

来源：互联网发布：神创天下女神升阶数据编辑：程序博客网时间：2024/06/06 02:49

在imooc上看angularjs指令4,搜索了转载下

基于字符串的绑定：使用@操作符，双引号内的内容当做字符串进行绑定。
基于变量的绑定：使用=操作符，绑定的内容是个变量,双向数据绑定
基于方法的绑定：使用&操作符，绑定的内容是个方法。
@
=
&

上图代码:

<!doctype html><html ng-app="myApp">    <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>    </head>    <body>        <div ng-controller="myAppCtrl">            <xingoo say="test string"></xingoo>            <xingoo say="{{str2}}"></xingoo>            <xingoo say="test()"></xingoo>        </div>        <script type="text/javascript">            var myAppModule = angular.module("myApp",[]);            myAppModule.controller("myAppCtrl",['$scope',function($scope){                $scope.str1 = "hello";                $scope.str2 = "world";                $scope.str3 = "angular";            }]);            myAppModule.directive("xingoo",function(){                return {                    restrict:'AE',                    scope:{                        say:'@'                    },                    template:"<div>{{say}}</div><br>",                    repalce:true                }            })        </script>    </body></html>

<!doctype html><html ng-app="myApp">    <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>    </head>    <body>        <div ng-controller="myAppCtrl">            ctrl:<input type="text" ng-model="testname"><br>            directive:<xingoo name="testname"></xingoo>        </div>        <script type="text/javascript">            var myAppModule = angular.module("myApp",[]);            myAppModule.controller("myAppCtrl",['$scope',function($scope){                $scope.testname="my name is xingoo";            }]);            myAppModule.directive("xingoo",function(){                return {                    restrict:'AE',                    scope:{                        name:'='                    },                    template:'<input type="text" ng-model="name">',                    repalce:true                }            })        </script>    </body></html>

<!doctype html><html ng-app="myApp">    <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>    </head>    <body>        <div ng-controller="myAppCtrl">            <xingoo say="sayHello(name)"></xingoo>            <xingoo say="sayNo(name)"></xingoo>            <xingoo say="sayYes(name)"></xingoo>        </div>        <script type="text/javascript">            var myAppModule = angular.module("myApp",[]);            myAppModule.controller("myAppCtrl",['$scope',function($scope){                $scope.sayHello = function(name){                    console.log("hello !"+ name);                };                $scope.sayNo = function(name){                    console.log("no !"+ name);                };                $scope.sayYes = function(name){                    console.log("yes !"+ name);                };            }]);            myAppModule.directive("xingoo",function(){                return {                    restrict:'AE',                    scope:{                        say:'&'                    },                    template:'<input type="text" ng-model="username"/><br>'+                        '<button ng-click="say({name:username})">click</button><br>',                    repalce:true                }            })        </script>    </body></html>

参考资料:

http://www.cnblogs.com/xing901022/p/4291521.html

文章若有纰漏请大家补充指正,谢谢~~

http://blog.xinshangshangxin.com SHANG殇

0 0