深入理解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 就同时指向了 一个地址 所有的事情也就顺理成章了
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
-
问题内容： 我一直在尝试定义指令，以便可以根据字段的类型及其参数（存储在数据库中）以表格形式显示不同的“窗口小部件”。我需要对不同类型的场景做出反应，因此需要使用指令来处理布局。 在玩一些示例时，我想出了 kinda 可以工作的代码： HTML 指示 这似乎可行（尽管明显比* proper * angularJS变量绑定要慢），但我认为必须有更好的方法来做到这一点。谁能阐明这件事？ 问题答案： 我
-
本文向大家介绍深入学习AngularJS中数据的双向绑定机制，包括了深入学习AngularJS中数据的双向绑定机制的使用技巧和注意事项，需要的朋友参考一下 Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQue
-
本文向大家介绍浅谈AngularJs 双向绑定原理(数据绑定机制)，包括了浅谈AngularJs 双向绑定原理(数据绑定机制)的使用技巧和注意事项，需要的朋友参考一下 那么什么是双向绑定，下面简单进行讲解。 首先我们要理解数据绑定。我们看到的网站页面中，是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点
-
问题内容： 如果我有一个没有模板的AngularJS指令，并且希望它在当前作用域上设置一个属性，那么最好的方法是什么？ 例如，计算按钮点击次数的指令： 使用伪指令将点击计数分配给双向属性中的表达式： 有一个更好的方法吗？从我所读的内容来看，孤立的作用域会过大，但是我需要一个子作用域吗？除了使用以外，还有没有更干净的方法可以写回指令属性中定义的范围变量。我只是觉得我很难过。 这里有完整的柱塞。 问题
-
问题内容： 更新 ：在代码的另一部分中一定有些愚蠢。现在可以使用，因此bindToController语法很好。 我们正在使用AngularJS 1.4，它引入了在指令中使用bindToController的新方法。 经过大量的阅读（也许并不能理解所有内容），我们如下定义了指令： 从这样的另一个视图调用它： 先前已在视图控制器中定义： 像这样在指令模板中引用变量： 我们花了4小时试图弄清楚为什么我
-
本文向大家介绍AngularJS入门教程之双向绑定详解，包括了AngularJS入门教程之双向绑定详解的使用技巧和注意事项，需要的朋友参考一下 在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现，添加一个新的模型属性，把它和迭代器集成起来，然后让数据绑定完成剩下的事情。 请重置工作目录： git checkout -f step-4 你应该发现除了搜索框之外，你的应用多了一