2016-01-12 20 views
12

Sto provando ad usare il nuovo metodo .component() in angular 1.5. Attualmente ho trovato poche informazioni su come usarlo. I dottori angolari non ne parlano nemmeno.

Sto provando a passare l'ambito o un oggetto dall'ambito al .component da utilizzare nella parte modello del componente ma gli unici due parametri che posso passare sono $ elemento e $ attrs. Ho provato a passare l'oggetto attraverso un attributo in html ma tutto ciò che ho ottenuto è stata la stringa del nome dell'oggetto.

ho cercato impostandola essere rappresentato come una variabile in questi modi

my-attr="item.myVal" 
my-attr="{item.myVal}" 
my-attr="{{item.myVal}}" 

ogni volta ancora ottenere la stringa letterale e non il valore della variabile. Come posso impostarlo per essere trattato come una variabile?

Ho provato a catturare i dati tramite i nuovi collegamenti: {} ma il mio modello: {} non ha avuto accesso alle variabili allora.

Qui è la mia componente come è ora:

export var ItemListAction = { 
    controller: 'PanelCtrl as itemCtrl', 
    isolate: false, 
    template: ($element: any, $attrs: any): any=> { 
     var myVal: any = $attrs.myAttr; // returns "item.myVal" 
     var listAction: string = compileListAction(); 
     return listAction; 
    } 
}; 

Qui è la mia componente in HTML

<panel-item-list-action my-attr="item.myVal"></panel-item-list-action> 

Questa è la dichiarazione del modulo angolare per la componente: angular.module('Panel', []).component('panelItemListAction', ItemListAction)

risposta

6

Modelli don 'ho bisogno di $ scope. Le funzioni del modello restituiscono HTML. È possibile iniettare $ scope nel controller come sempre.

Questo è ciò che l'AngularJS blog dice di componenti:

module.component

Abbiamo creato un modo più semplice di registrare direttive componenti. In sostanza, i componenti sono tipi speciali di direttive, che sono legati a un elemento personalizzato (qualcosa come <my-widget></my-widget>), con un modello associato e alcuni collegamenti. Ora, utilizzando il metodo .component() in AngularJS 1.5, è possibile creare un componente riutilizzabile con poche righe di codice:

var myApp = angular.module("MyApplication", []) 
myApp.component("my-widget", { 
    templateUrl: "my-widget.html", 
    controller: "MyWidgetController", 
    bindings: { 
    title: "=" 
    } 
}); 

Per saperne di più sul metodo del componente AngularJS 1.5 si prega di leggere Todd articolo di motto: http://toddmotto.com/exploring-the-angular-1-5-component-method/

- http://angularjs.blogspot.com/2015/11/angularjs-15-beta2-and-14-releases.html

+0

Grazie per la risposta, c'è qualche modo per accedere alla portata, oggetto o variabile i nside the template: {} proprietà? Il blog non menziona che i modelli – appthat

+1

non hanno bisogno di $ scope. Le funzioni del modello restituiscono HTML. È possibile iniettare $ scope nel controller come sempre. – georgeawg

+0

quindi, al di fuori dell'isolamento dell'ambito, .component() è simile a ng-include? – appthat

Problemi correlati