AngularJS 双向作用域

双向数据绑定

1.AngularJS => DOM

 1 <!doctype html>
 2 <html ng-app="myApp">
 3 <head>
 4   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
 5 </head>
 6 <body>
 7 
 8   <label>Their URL field:</label>
 9   <input type="text" ng-model="theirUrl">
10   <div my-directive
11        some-attr="theirUrl"
12        my-link-text="Click me to go to Google"></div>
13 
14   <script>
15     angular.module('myApp', [])
16     .directive('myDirective', function() {
17       return {
18         restrict: 'A',
19         replace: true,
20         scope: {
21           myUrl: '=someAttr',
22           myLinkText: '@'
23         },
24         template: '\
25           <div>\
26             <label>My Url Field:</label>\
27             <input type="text" ng-model="myUrl" />\
28             <a href="{{myUrl}}">{{myLinkText}}</a>\
29           </div>\
30         '
31       }
32     })
33   </script>
34 
35 </body>
36 </html>
View Code

2.DOM => AngularJS =>DOM

 

posted @ 2015-09-28 09:45  Byron12345  阅读(118)  评论(0)  编辑  收藏  举报