angularJS Directive學習

標籤：style   blog   http   color   strong   os   

Directive 指令

直接上執行個體

index.html

<!doctype html><html ng-app="drag">  <head>    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>    <script src="script.js"></script>  </head>  <body>    <span draggable>Drag ME</span>

    <div enter>I am Directive</div>
  </body></html>

 

script.js:

var dragDir=angular.module(‘drag‘, []);
dragDir.directive("enter", function () {
    return function (scope, element) {
        element.bind("mouseenter", function () {
            alert("enter");
        });
    };
});dragDir.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);      }    } });

oK！然後來學習一些概念性的東西！

 

“指令”：

AngularJS的HTML編譯器能讓瀏覽器識別新的HTML文法。它能讓你將行為關聯到HTML元素或者屬性上，甚至能讓你創造具有自訂行為的新元素。AngularJS稱這種行為擴充為“指令”

指令指示的是“當關聯的HTML結構進入編譯階段時應該執行的操作”。本質上只是一個當編譯器編譯到相關DOM時需要執行的函數

 

編譯器(complier)：

編譯器是AngularJS提供的一項服務，它通過遍曆DOM來尋找和它相關的屬性。整個編譯的過程分為兩個階段。

• 編譯： 遍曆DOM並且收集所有的相關指令，產生一個連結函數。

• 連結： 給指令綁定一個範圍，產生一個動態視圖。範圍模型的任何改變都會反映到視圖上，並且視圖上的任何使用者操作也都會反映到範圍模型。這使得範圍模型成為你的商務邏輯裡唯一要關心的東西。