Angular 1.5 Komponente Attribut Anwesenheit

Question

Ich Refactoring einige eckige Direktiven zu eckigen 1,5-Stil-Komponenten.

Einige meiner Direktiven haben ein Verhalten, das davon abhängt, dass ein bestimmtes Attribut vorhanden ist, also ohne dass das Attribut einen bestimmten booleschen Wert hat. Mit meinen Anweisungen erreiche ich dies mit der Link-Funktion:

link: function(scope,elem,attrs, controller){ 
     controller.sortable = attrs.hasOwnProperty('sortable'); 
    }, 

Wie würde ich dies mit der eckigen 1.5-Stil-Komponente Syntax tun?

Eine Sache, die ich tun könnte, ist eine Bindung hinzuzufügen, aber dann müsste ich den booleschen Wert angeben. Ich möchte meine Vorlagen so behalten, wie sie sind.

Answer 1

Verwenden Bindungen anstelle der direkten Verweis auf das DOM-Attribut:

angular.module('example').component('exampleComponent', { 
    bindings: { 
    sortable: '<' 
    }, 
    controller: function() { 
    var vm = this; 
    var isSortable = vm.sortable; 
    }, 
    templateUrl: 'your-template.html' 
}); 

Vorlage:

<example-component sortable="true"></example-component> 

unter Verwendung einer Ein-Wege-Bindung (angedeutet durch den '<') den Wert Die Variable 'sortable' auf der Controller-Instanz (hier vm für view-Modell genannt) ist ein boolescher Wert, wenn sie wie im Beispiel gezeigt gesetzt ist. Wenn Ihr sortierbares Attribut derzeit eine Zeichenfolge in Ihrer Vorlage enthält, kann auch eine '@' - Bindung eine geeignete Option sein. Der Wert von vm.sortable wäre auch in diesem Fall eine Zeichenfolge (oder undefiniert, wenn das Attribut nicht in der Komponentenmarkierung definiert ist).

Überprüfung auf die bloße Anwesenheit des sortierbar Attribut funktioniert wie folgt:

bindings: { sortable: '@' } 

// within the controller: 
var isSortable = vm.sortable !== undefined; 

Answer 2

Mit Bindungen arbeiten können, aber nicht, wenn Sie versuchen, ohne Wert für die Existenz eines Attributs zu überprüfen. Wenn Sie sich nicht um den Wert kümmern, können Sie einfach überprüfen, ob die $element auf dem Controller vorhanden ist.

angular 
    .module('yourModule') 
    .component('yourComponent', { 
     templateUrl: 'your-component.component.html', 
     controller: yourComponentsController 
    }); 

function yourComponentController($element) { 
    var sortable = $element[0].hasAttribute("sortable"); 
}