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

网络编程 2024/11/15 佚名

3 2 1

下面来先看一个简单例子

<!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="/UploadFiles/2021-04-02/angular.min.js">

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


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


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


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


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