深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機制

更新時間：2016年12月31日 14:38:40 作者：冰果在線

這篇文章主要深入的給大家介紹了Angularjs向指令傳遞數(shù)據(jù)，雙向綁定機制的相關(guān)資料,需要的朋友可以參考下

下面來先看一個簡單例子

<!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>

這個例子我用通俗的話來過一遍

1.使用隔離作用域讓DOM中的 ng-model="Url" ，這里暫且叫他'A' 與指令中的 some-attr="Url" --> 'B' 形成雙向綁定關(guān)系

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

經(jīng)過上面的步驟，B與隔離作用域中的model myUrl 就指向了同一個地方

2.使隔離作用域中的model myUrl -->'B' 與指令模板中的 ng-model="myUrl" -->'C' 形成雙向綁定關(guān)系

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

這個時候 A B C 就同時指向了一個地址所有的事情也就順理成章了

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

angularjs實現(xiàn)猜數(shù)字大小功能
這篇文章主要為大家詳細介紹了angularjs實現(xiàn)猜數(shù)字大小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
angularjs請求數(shù)據(jù)的方法示例
這篇文章主要給大家介紹了關(guān)于angularjs請求數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angularjs具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-08-08
Angular4.0中引入laydate.js日期插件的方法教程
在AngularJs中我們會不可避免的使用第三方庫，例如jquery插件庫。下面這篇文章主要給大家介紹了關(guān)于Angular4.0中引入laydate.js日期插件的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。
2017-12-12
angularjs自定義ng-model標簽的屬性
這篇文章主要介紹了angularjs自定義ng-model標簽的屬性的相關(guān)資料,需要的朋友可以參考下
2016-01-01
Angular工具方法學習
這篇文章主要為大家詳細介紹了Angular工具方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
AngularJS基礎(chǔ) ng-list 指令詳解及示例代碼
本文主要介紹AngularJS ng-list 指令,這里幫大家整理了ng-list指令的基本資料,并附有示例代碼,有需要的小伙伴可以參考下
2016-08-08
AngularJS模仿Form表單提交的實現(xiàn)代碼
本文通過一段實例代碼給大家簡單介紹了angularjs模仿form表單提交的方法，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-12-12
Angular?@Injectable注解的工作原理解析
這篇文章主要為大家介紹了Angular?@Injectable注解的工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
解決angularJS中input標簽的ng-change事件無效問題
今天小編就為大家分享一篇解決angularJS中input標簽的ng-change事件無效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
AngularJS ionic手勢事件的使用總結(jié)
本篇文章主要介紹了AngularJS手勢事件的使用總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08