Richtlinie zu Komponente Angular 1.5x

Question

Ich muss mehrere Direktiven Komponenten ausgeben. Aber die Wahrheit ändert sich nicht ganz. Dies kann zum Beispiel mit der folgenden Richtlinie in einem solchen Fall geschehen. Wie? Vielen Dank.

(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

Eine einfache Erklärung über die Komponente und ihre Beziehung zur Anweisung wurde in den Dokumenten gegeben.

In Angular eine Komponente ist eine besondere Art der Richtlinie, die eine einfachere Konfiguration verwendet, die für eine komponentenbasierte Anwendungsstruktur geeignet ist, (AngularJs guide for components).

Grundsätzlich ist eine Komponente, eine einfache Richtlinie mit einem Standardverhalten für Verbindung definiert und Phase kompiliert und auch andere tiefe Verhaltensweisen wie priority oder restrict zum Beispiel. Außerdem ist der Bereich immer auf einer Komponente isoliert, da die gesamte Interaktion zwischen Bereichen durch die Bindungen der Komponente gesteuert werden muss.

Eine Komponente ist dazu bestimmt, wiederverwendbare Schnittstellenblöcke zu erstellen, ohne sich stark auf das Tiefenverhalten der Elemente zu konzentrieren, aber auf die Eigenschaft dieses Blocks ist es wie eine objektivere Richtlinie, nicht verhaltensbezogen. Wie auch immer, komponentenartige Direktiven wurden schon vorher benutzt, aber es wurde noch nicht als Komponente bezeichnet.

In Bezug auf eine Direktive-Deklaration ändert sich eine Komponente nicht viel, es wird einfacher, solche Anweisungen zu deklarieren, aber sie hat die meisten der Direktiven-Funktionen. Ihre Anweisung würde beispielsweise wie der folgende Code aussehen.

(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; 
    }; 
    }  
})();