角度指令

Question

我正在研究Angular庫並且有一個關於指令的簡單（可能是微不足道的）問題，這些指令可能有助於我在閱讀一般文檔時將該術語置於適當的上下文中：

當docs / tutorials引用指令時，它們是指：

• HTML（el，attr或class）;
• 編譯后的HTML;
• 執行的Javascript函數;
• 兩者合作的一般概念;

有時使用該術語的上下文似乎有點模糊，可能是因為我還處於學習階段。

Answer 1

AngularJs的一個特性是聲明一個指令 。 通過聲明一個指令，您可以創建一些允許您以各種方式擴展HTML的東西。 因此，當人們談論指令時，他們指的是整個事情，當你查看所有細節時，這是一個非常復雜的概念。

在談論定義指令的JavaScript函數時，大多數人都在談論“ 指令 ”，因為這是定義新指令的方式 。

大多數情況下，他們不會談論DOM中編譯的HTML。

Answer 2

Angular團隊提出的指令定義非常明確。

指令是DOM元素上的標記（例如屬性，元素名稱，注釋或CSS類），它告訴AngularJS的HTML編譯器（$ compile）將指定的行為附加到該DOM元素，甚至轉換DOM元素及其子元素。

我使用術語指令的上下文如下：

我將構建一個延遲加載圖像的指令。

我有一張圖片：

 <img src="image.jpg"/>

讓我們在image元素上添加一個標記，以便AngularJs框架知道我們想要操作那個html元素，或者元素中的html。

<img lazy-load src="image.jpg" />

為了確保在javascript啟動之前還沒有獲取image.jpg，我們只需在src中添加一個占位符，並在該指令中可用的元素上添加一個屬性。

<img lazy-load src="placeholder.jpg" origin-src="image.jpg" />

現在讓我們在AngularJs Framework中構建實際的指令。

app.directive('lazyLoad', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {

      var imagesrc = attrs.originSource;          
      // further logic to lazyload image
    }
  };

});

您可以在此處找到許多關於指令的示例： https ： //docs.angularjs.org/guide/directive

Answer 3

指令 - 我想這個術語本身會給大多數人帶來困惑。 這就是為什么棱角分明的人會使用2.0的“組件”術語。

指令只不過是編寫我們自己的可重用自定義標記並為其分配一些有意義的功能。

可以說，我們希望在所有頁面上反復顯示廣告面板。 它應該取決於用戶的歷史，偏好，還支持延遲加載圖像等。

我們可以創建一個指令，它將采用圖像名稱，優先級等，並將自己呈現它。

我們可以將其創建為可重用的組件，並在app中的任何位置使用它，只需將其包含在html標記中即可。

Answer 4

指令是Angular的核心編碼理念，也是其大部分功能的源泉。 它們是“領域特定語言”的實現，這意味着您，程序員，可以編寫自己的語言。

雖然這里的其他評論集中在HTML或定義指令的Javascript上，但這些都不是最重要的概念。 大外賣的是，在這兩個 HTML和Javascript代碼的HTML結果寫指令（和可能的角碼，太）獲得運行。 在定義指令時，會指示一個模板 ，用於指示實際輸出哪個HTML來代替您編寫的指令。 但更重要的是，還指示了一個控制器 ，它告訴您哪些代碼可供HTML訪問，包括對象和函數。

ungallery.directive('footer', function() {
return {
    restrict: "E",
    controller: "footer",
    controllerAs: "footerController",
    templateUrl: 'directives/footer.html'
}
});

如果我的index.html（或由它加載的任何腳本）中存在此指令定義，那么我稍后可以寫：

<footer></footer>

進入index.html並可以訪問兩件事：生活在“directives / footer.html”的模板和名為“footer”的控制器 。 這是footerController的定義。 它的存在只是為了讓HTML頁面可以看到應用程序的版本號，我希望在所有頁面的頁腳中顯示：

var footerController = function() {
   this.version = CONSTANT.version;
};

ungallery.controller("footer", footerController);

控制器可以將任何對象或函數分配給稱為this的對象，並且由於此指令連接，這些對象和函數將可用於模板HTML。 該控制器分配一個值， this ， this.version ，這樣我就可以得到從我的模板值。

在該指令的定義，controllerAs語法設置，我用它來訪問控制器的名字this從模板。 該controllerAs語法和不同的名字來代替剛寫的原因{{this.something}}是為了防止混淆當一個頁面有幾個指令，每個都有自己的含義的this 。 在定義footer控制器， this與前綴訪問footerController 。 當我想顯示實際版本號時，這就是模板HTML中的內容。

 <span>Version {{footerController.version}}.</span>

希望有所幫助！ 如果我需要擴展或澄清任何這一點，請告訴我。

- D.