Kątowe komponenty: wiązania są niezdefiniowane w kontrolerze

Question

Piszę prosty komponent kątowy. Podaję parametr jako wiązanie i wyświetlam jego wartość na ekranie. Wszystko działa dobrze: widzę parametr wyświetlany na ekranie.

Składnik:

var app = angular.module("test", []); 
app.component("test", { 
    bindings: { 
    "contactId": "<" 
    }, 
    controllerAs: "model", 
    controller:() => { 
    //output: 'contact id from controller: undefined' 
    console.log(`contact id from controller: ${this.contactId}`); 
    }, 
    template: "<div>Contact id from view: {{model.contactId}}</div>" 
}); 

HTML:

<test contact-id="8"></test> 

Jednak przy próbie dostępu do wiązania z poziomu sterownika (patrz console.log), wartość wiążąca jest undefined. Nie rozumiem, jak może on być dostępny w widoku, ale nie w kontrolerze.

Co robię źle?

Oto plnkr ilustrujący problem.

Answer 1

Podczas korzystania z komponentów kątowych istnieje punkt, w którym sterownik nie został podłączony za pomocą wewnętrznego połączenia łączącego. Jeśli próbujesz to zrobić w konstruktorze swojego kontrolera, nie jesteś połączony z powiązaniami. Interfejs API udostępnia kilka haseł cyklu życia, które możesz zdefiniować, które będą uruchamiane w określonych momentach. Szukasz haka $onInit.

$ onInit() - Powołani na każdym kontrolerze po wszystkie kontrolery na elemencie zostały skonstruowane i mieli powiązania zainicjowana (i przed pre & pocztowych łączenie funkcji dla dyrektyw dotyczących tego elementu). To jest dobre miejsce na umieszczenie kodu inicjalizacyjnego dla kontrolera.

za docs - https://docs.angularjs.org/guide/component

Answer 2

Słowo kluczowe ten nie wydaje się prace z funkcją strzałki, to działa z

controller: function() { 
    alert('contact id from controller: ' + this.contactId); 
} 

Podczas używania funkcji strzałki ten, wydaje się odnoszą się do obiektu okna, ponieważ

Funkcja strzałka nie tworzy swój własny tym kontekście raczej oddaje tę wartość kontekście otaczającej

Answer 3

Wartość contactId jest dostępny na $scope w kontrolerze:

var app = angular.module("test", []); 
app.component("test", { 
    bindings: { 
    "contactId": "<" 
    }, 
    controllerAs: "model", 
    controller: ($scope) => { 
    var model = $scope.model; 
    alert(`contact id from controller: ${model.contactId}`); 
    }, 
    template: "<div>Contact id from view: {{model.contactId}}</div>" 
}); 

link do innej wersji twojego Plunkera here.

Answer 4

Upewnij się, że używasz łączników dla powiązań w HTML i camelCase dla powiązań w JavaScript.

app.component("test", { 
    bindings: { 
    "myContactId": "<" 
    } 
} 

<test my-contact-id="8"></test> 

Zawsze o tym zapominam.

Answer 5

Its może jej nie najlepsze praktyki, ale masz dostęp do tych easyer wartości:

$scope.$ctrl.contactId 

można uzyskać wszystkie powiązania w obiekcie $ ctrl wewnątrz zakresu $.

Mam nadzieję, że jego pomoc

Answer 6

będę sugerować pewne zmiany, które naprawdę potrzebują, aby uniknąć tych niezwykłych błędów.

app.component("test", { 
    bindings: { 
    "myContactId": "<" 
    }, 
    controller:function(){ 
    var self=this; 
    this.$onInit=function(){ 
    // do all your initializations here. 
    // create a local scope object for this component only. always update that scope with bindings. and use that in views also. 

     self.myScopeObject=self.myContactId 
    } 
    }, 
    template:'<p>{{$ctrl.myScopeObject}}</p>' 
} 

<test my-contact-id="8"></test> 

kilka punktów:

1. przechodzące powiązania z komponentem w HTML jest zawsze będzie mój kebab powlekanego ex-contact-id i jego odpowiednia zmienna javascript będzie cammal obudowane: myContactId.

2. jeśli podajesz wartość insted obiektu, użyj "@" w powiązaniach. jeśli używasz obiektu i przekazujesz obiekt do bindigs, użyj "<. jeśli chcesz 2-drożny wiążące do tego zastosowania obiektu '=' w oprawach config

bindings:{ 
     value:'@', 
     object:'<', // also known as one-way 
     twoWay:'=' 
    }