• 《AngularJS权威教程》中关于指令双向数据绑定的理解


    在《AngularJS权威教程》中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具体代码如下:

    <!doctype html>
    <html ng-app="myApp">
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    </head>
    <body>
    
      <label>Their URL field:</label>
      <input type="text" ng-model="theirUrl">
      <div my-directive
           some-attr="theirUrl"
           my-link-text="Click me to go to Google"></div>
    
      <script>
        angular.module('myApp', [])
        .directive('myDirective', function() {
          return {
            restrict: 'A',
            replace: true,
            scope: {
              myUrl: '=someAttr',
              myLinkText: '@'
            },
            template: '
              <div>
                <label>My Url Field:</label>
                <input type="text" ng-model="myUrl" />
                <a href="{{myUrl}}">{{myLinkText}}</a>
              </div>
            '
          }
        })
      </script>
    
    </body>
    </html>

    其中myUrl: '=someAttr'我不是很理解,于是改成 myUrl: '@someAttr',但是这样页面显示如图:

    查看元素发现链接的href="theirUrl",并且;两个输入框的内容也不同步,仔细查看代码,发现DOM中将some-attr设置值方式不是表达式,所以修改如下(修改处为绿色):

    <body>
    
      <label>Their URL field:</label>
      <input type="text" ng-model="theirUrl">
      <div my-directive
           some-attr={{theirUrl}}    
           my-link-text="Click me to go to Google"></div>
    
      <script>
        angular.module('myApp', [])
        .directive('myDirective', function() {
          return {
            restrict: 'A',
            replace: true,
            scope: {
              myUrl: '@someAttr',
              myLinkText: '@'
            },
            template: '
              <div>
                <label>My Url Field:</label>
                <input type="text" ng-model="myUrl" />
                <a href="{{myUrl}}">{{myLinkText}}</a>
              </div>
            '
          }
        })
      </script>
    
    </body>

    效果是,第2个输入框随着第1个变化,反之不是。

    总结:指令要访问其内部的指令,需要:

    1.指令属性值用表达式即{{}}设置,改为“”

    2.内部指令对应属性数据绑定”@”改为”=”

  • 相关阅读:
    About LabView
    Accuracy, Precision, Resolution & Sensitivity
    EIT: where is it now and what lies ahead?
    <2014 12 28> Some conclusions and thought recently
    <2014 10 01> 数学基础 Wikipedia
    关于HashMap
    elasticsearch index 之 put mapping
    elasticsearch index 之 create index(二)
    elasticsearch index 之 create index(-)
    elasticsearch index 之merge
  • 原文地址:https://www.cnblogs.com/momoxiaoqing/p/6050348.html
Copyright © 2020-2023  润新知