angularjs入门

当前位置:首页>AngularJS>angularjs入门>angularJS开发指南(angularJS developer guide) 之二

angularJS开发指南(angularJS developer guide) 之二

时间:2015-08-07 16:45来源:网络整理 作者:KKWL 点击:
【马海旭】倾情奉献的Spring教程Android开发,8月14开课啦!聊聊高效编程,送800元大奖CSDN移动客户端,下载送50C币 angularJS开发指南(angularJS developer guide) 之二 Directive指令 大致意思::指

【马海旭】倾情奉献的Spring教程     Android开发,8月14开课啦!     聊聊高效编程,送800元大奖     CSDN移动客户端,下载送50C币    

angularJS开发指南(angularJS developer guide) 之二

Directive 指令


大致意思::指令是当关联的HTML结构进入编译阶段时应该执行的操作。指令可以写在很多地方<span ng-bind="exp"></span>

<span class="ng-bind: exp;"></span> <ng-bind></ng-bind> <!-- directive: ng-bind exp --> <!doctype html> <html ng-app="drag"> <head> <script src=""></script> <script src="script.js"></script> </head> <body> <span draggable>Drag ME</span> </body> </html> scirpt.js angular.module('drag', []). directive('draggable', function($document) { var startX=0, startY=0, x = 0, y = 0; return function(scope, element, attr) { element.css({ position: 'relative', border: '1px solid red', backgroundColor: 'lightgrey', cursor: 'pointer' }); element.bind('mousedown', function(event) { startX = event.screenX - x; startY = event.screenY - y; $document.bind('mousemove', mousemove); $document.bind('mouseup', mouseup); }); function mousemove(event) { y = event.screenY - startY; x = event.screenX - startX; element.css({ top: y + 'px', left: x + 'px' }); } function mouseup() { $document.unbind('mousemove', mousemove); $document.unbind('mouseup', mouseup); }

Understanding View 理解视图
There are many templating systems out there. Most of them consume a static string template and combine it with data, resulting in a new string. The resulting text is then innerHTMLed into an element.
网上有很多模板系统,很多就是将静态的字符模板和数据绑定,生成新字符,然后通 过innerHTML插入到页面元素中”

如下图所示:


这样有很多不同的地方,比如,任何数据的改变,都要重新组装新字符,然后写入到页面元素中
Angular is different. The Angular compiler consumes the DOM with directives, not string templates. The result is a linking function, which when combined with a scope model results in a live view. The view and scope model bindings are transparent. No action from the developer is needed to update the view. And because no innerHTML is used there are no issues of clobbering user input. Furthermore, Angular directives can contain not just text bindings, but behavioral constructs as well.
angular 不是这样的,AngularJS编译器使用的是带指令的DOM。
如下图所示:


The Angular approach produces a stable DOM. This means that the DOM element instance bound to a model item instance does not change for the lifetime of the binding. This means that the code can get hold of the elements and register event handlers and know that the reference will not be destroyed by template data merge.
AngularJS会生成一个“稳定的DOM”。也就是说DOM元素的实例不会在生命周期中改变。也就是说代码中可以获取到DOM元素并注册事件,不用担心模板和数据丢失。


  • 上一篇angularJS开发指南(angularJS developer guide) 之一
  • 下一篇angularJS开发指南(angularJS developer guide) 之三 核心编程
  • 猜你在找

    查看评论

    * 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

    ------分隔线----------------------------