快捷導(dǎo)航

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

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

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

下面來(lái)先看一個(gè)簡(jiǎ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', // 等號(hào)用做 雙向綁定 這里不做詳細(xì)介紹
        }, 
        template: '<div>'+
              '<label>指令中的input</label>'+
              '<input type="text" ng-model="myUrl">'+
              '<a href="{{ myUrl }}">點(diǎn)我試試</a>'+
             '</div>'
        
      }
    })
  </script>
</body>
</html>

這個(gè)例子我用通俗的話來(lái)過(guò)一遍

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

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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