Funkcja szablonu nie interpolująca wiązań komponentów

Question

Używam 1.5 składników, ale nie sądzę, żeby to miało znaczenie.

Próbuję wykonać pojedyncze powiązanie = między kontrolerem nadrzędnym a zakresem izolowanym dyrektywy potomnej. Zakres izolowania podrzędnego interpoluje wiązanie dosłownie; zamiast vm.data interpolacji do danych, które zdefiniowałem w kontrolerze, wypada dosłownie vm.data jako ciąg znaków.

Jeśli spróbuję połączyć w jedną stronę z @, to ponownie wartość "interpolowana" da się dosłownie {{vm.data}}.

Jak mogę uzyskać ciąg zdefiniowany w kontrolerze nadrzędnym w szablonie komponentu podrzędnego?

angular 
    .module('app', []) 
    .controller('Ctrl', function() { 
    this.str = '<0>, blah, <1>'; 
    }) 
    .component('appComponent', { 
    restrict: 'E', 
    controller: 'Ctrl as vm', 
    template: '<div><app-str appstr-data="{{vm.str}}"></app-str></div>' 
    }) 
    .component('appStr', { 
    bindings: { appstrData: '@' }, 
    restrict: 'EA', 
    template: function($element, $attrs) { 
     console.log($attrs.appstrData) 
     return '<span>'+$attrs.appstrData+'</span>'; 
    } 
    }); 

https://plnkr.co/edit/VWVlhDbhP2uDRKtXJZdE?p=preview

Answer 1

Jeśli chciał uzyskać ciąg zdefiniowany w sterowniku dominującej aby uczynić u dziecka należy użyć {{appStr.appstrData}} interpolacji tylko go używać wewnątrz szablonu dziecięcej.

Pierwsza rzecz, którą należy zmienić, to zwrócenie nieprawidłowego template z szablonu appStr.

Zamiast

return '<span>'+$attrs.appstrData+'</span>'; 

Zastosowanie

return '<span>{{appStr.appstrData}}</span>'; 

Zasadniczo należy użyć nazwę komponentu, aby mieć dostęp do komponentu bindings, jak tutaj nazwa składnika jest appStr tak dlatego wiązanie zmiennej mogą być dostępne za pomocą {{appStr.appstrData}}

Komponent

.component('appStr', { 
    bindings: { appstrData: '@' }, 
    restrict: 'EA', 
    template: function($element, $attrs) { 
     return '<span>{{appStr.appstrData}}</span>'; //<--change here 
    } 
}); 

Demo Plunkr

---

Plunkr with = binding

---

Plunkr with no bindings (isolate: false) oznacza brak izolowane zakres