下面來先看一個簡單例子
<!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', // 等號用做 雙向綁定 這里不做詳細(xì)介紹 }, template: '<div>'+ '<label>指令中的input</label>'+ '<input type="text" ng-model="myUrl">'+ '<a href="{{ myUrl }}">點(diǎn)我試試</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 }}">點(diǎn)我試試</a>'+ '</div>'這個時候 A B C 就同時指向了 一個地址 所有的事情也就順理成章了
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點(diǎn)
疑難解答
