深入理解Angularjs向指令傳遞數據雙向綁定機制

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

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

下面來先看一個簡單例子

<!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' 形成雙向綁定關系

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 就同時指向了一個地址所有的事情也就順理成章了

總結

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

您可能感興趣的文章:

Angular2開發(fā)環(huán)境搭建教程之VS Code
不久前WebStorm的頻繁卡死終于讓我受不鳥了,我決定換個輕量級的編輯器，嘗試了Emacs、Sublime text,最后選擇了vscode。下面這篇文章主要給大家介紹了關于Angular2開發(fā)環(huán)境搭建教程之VS Code的相關資料，需要的朋友可以參考下。
2017-12-12
AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能示例
這篇文章主要介紹了AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能,結合實例形式分析了AngularJS自定義過濾器的定義及數組過濾相關操作技巧,需要的朋友可以參考下
2018-04-04
在Angular中使用innerHTML屬性綁定的方法
Angular 2+ 支持使用 [innerHTML] 屬性綁定來渲染 HTML,如果你使用插值,它會被視為字符串,本文將介紹如何使用 [innerHTML] 以及一些注意事項,需要的朋友可以參考下
2024-02-02
詳解Angular 自定義結構指令
本篇文章主要介紹了詳解Angular 自定義結構指令，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Angular4集成ng2-file-upload的上傳組件
本篇文章主要介紹了Angular4集成ng2-file-upload的上傳組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
AngularJS中如何使用$parse或$eval在運行時對Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運行時對Scope變量賦值的相關資料,本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2016-01-01
使用AngularJS中的SCE來防止XSS攻擊的方法
這篇文章主要介紹了使用AngularJS中的SCE來防止XSS攻擊的方法,依靠合理地轉碼為HTML來預防跨站腳本漏洞共計,需要的朋友可以參考下
2015-06-06
angular4響應式表單與校驗實現demo
這篇文章主要介紹了angular4響應式表單與校驗實現demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
解決angularJS中input標簽的ng-change事件無效問題
今天小編就為大家分享一篇解決angularJS中input標簽的ng-change事件無效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
AngularJS學習筆記之基本指令(init、repeat)
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。ng-app 指令初始化一個 AngularJS 應用程序。ng-init 指令初始化應用程序數據。ng-model 指令把應用程序數據綁定到 HTML 元素。
2015-06-06