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

本文轉載自查看原文 2016-10-12 11:05 2279 AngularJS/ 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 就同時指向了一個地址所有的事情也就順理成章了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 深入理解 Object.defineProperty 及實現數據雙向綁定理解angularjs雙向綁定深入理解Proxy 及使用Proxy實現vue數據雙向綁定 AngularJs 雙向綁定機制解析深入理解Java中方法的參數傳遞機制 AngularJS之雙向數據綁定,class綁定深入理解Notification機制深入理解session機制深入理解SPI機制深入理解Attention機制