当前位置：首页 > 资讯 > 技术文档

深入理解Angularjs向指令传递数据双向绑定机制

时间：2020-01-08 03:00 编辑：来源：阅读：
扫一扫，手机访问

摘要：深入理解Angularjs向指令传递数据双向绑定机制

[b]下面来先看一个简单例子[/b]

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="../bootstrap.min.js">
</head>
<body>
  <label>硬编码的input</label>
  <input type="text" ng-model="Url">
  <div my-directive some-attr="Url"></div>

  <script src="../angular.min.js"></script>
  <script>
    angular.module('app', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A', 
        replace: true,
        scope: { 
          myUrl: '=someAttr', // 等号用做 双向绑定 这里不做详细介绍
        }, 
        template: '<div>'+
              '<label>指令中的input</label>'+
              '<input type="text" ng-model="myUrl">'+
              '<a href="{{ myUrl }}">点我试试</a>'+
             '</div>'
        
      }
    })
  </script>
</body>
</html>

[b]这个例子我用通俗的话来过一遍[/b] 1.使用隔离作用域让DOM中的 [code]ng-model="Url"[/code] ，这里暂且叫他'A' 与指令中的 [code]some-attr="Url" --> 'B' [/code]形成双向绑定关系

scope: { 
  myUrl: '=someAttr',
},

经过上面的步骤，B与隔离作用域中的[code]model myUrl [/code]就指向了同一个地方 2.使隔离作用域中的[code]model myUrl -->'B' [/code]与指令模板中的[code] ng-model="myUrl" -->'C' [/code]形成双向绑定关系

template: '<div>'+
       '<label>指令中的input</label>'+
       '<input type="text" ng-model="myUrl">'+
       '<a href="{{ myUrl }}">点我试试</a>'+
     '</div>'

这个时候 A B C 就同时指向了一个地址所有的事情也就顺理成章了 [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
下一篇：js利用for in循环获取一个对象的所有属性以及值的实例

资讯排行榜
更多>>