当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > 深入理解Angularjs向指令传递数据双向绑定机制

深入理解Angularjs向指令传递数据双向绑定机制

2018年05月03日  | 移动技术网IT编程  | 我要评论

下面来先看一个简单例子

<!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 就同时指向了 一个地址 所有的事情也就顺理成章了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网