指令組件Angular 1.5x

Question

我必須花費幾個指令組件。 但事實上我並不完全改變。 在這種情況下，可以用下面的指令來完成。如？ 非常感謝。

(function() { 
'use strict'; 

angular 
.module('01') 
.directive('tableSortable', tableSortable); 

/** @ngInject */ 
function tableSortable() { 
return { 
    restrict: 'E', 
    transclude: true, 
    templateUrl: 'app/components/tabla/tableSortable.html', 
    scope: { 
    columns: '=', 
    data: '=', 
    sort: '=', 
    click: '&' 
    }, 
    link: function(scope) { 
    scope.selectedClass = function(columnName) { 
     return columnName == scope.sort.column ? 'sort-' + scope.sort.descending : false; 
    }; 
    } 
}; 

} }）（）;

Answer 1

在文檔中給出了關於什麼是組件以及它與指令關係的簡單解釋。

在Angular中，組件是一種特殊的指令，它使用更簡單的配置，適用於基於組件的應用程序結構（AngularJs guide for components）。

基本上，一個部件是一個簡單的指令與默認行爲鏈路定義和編譯階段以及其它深的行爲，如priority或restrict例如。而且，範圍始終與組件隔離，因爲範圍之間的所有交互都必須由組件的綁定來控制。

一個組件的目標是創建可重用的接口塊，而不是過多地關注元素的深層行爲，而是關注該塊的功能，這就像一個更客觀的指令而不是行爲。無論如何，類似組件的指令已經被使用過，但它還沒有被稱爲組件。

與指令聲明有關，組件不會發生太大的變化，聲明這樣的指令會稍微簡單一些，但它具有大多數指令特徵。例如，你的指令看起來像下面的代碼。

(function() { 
    'use strict'; 

    angular 
    .module('01') 
    .component('tableSortable', { 
     transclude: true, 
     templateUrl: 'app/components/tabla/tableSortable.html', 
     controller: TableSortableComponentController, 
     controllerAs: '$ctrl', 
     bindings: { 
     // consider using a one-way binding like '>' 
     columns: '=', 
     data: '=', 
     sort: '=', 
     click: '&' 
     } 
    }); 

    function TableSortableComponentController($scope, $element, $attrs) { 
    var $ctrl = this; 

    $ctrl.selectedClass = function(columnName) { 
     return columnName == $ctrl.sort.column ? 'sort-' + $ctrl.sort.descending : false; 
    }; 
    }  
})();