Der Wert der gebundenen Eigenschaft in der Winkelkomponente

Question

kann nicht festgelegt werden. Ich versuche, eine gebundene Eigenschaft für eine Winkelkomponente zu implementieren, wie in den Artikeln component documentation und this example erläutert.

Leider werden die Werte, die ich auf der Tag-Ebene oder in den $onInit Methoden zuweisen, nie verwendet. Der Wert wird auch nicht gedruckt, wenn ich ihn als Modellwert verwende.

Sie können die full code on plunker finden.

Meine verbindliche Definition:

(function(angular) { 
    'use strict'; 

    function SearchResultController($scope, $element, $attrs) { 
    var ctrl = this; 
    ctrl.searchFor = 'nohting-ctor'; 

    ctrl.$onInit = function() { 
     console.log('SearchResultController.$onInit: searchFor='+ctrl.searchFor); 
     ctrl.searchFor = 'nothing-int'; 
    }; 

    } 

    angular.module('myApp').component('searchResult', { 
    templateUrl: 'searchResult.html', 
    controller: SearchResultController, 
    bindings: { 
     searchFor: '<' 
    } 
    }); 
})(window.angular); 

Vorlage:

<p>SearchResult for <span ng-model="$ctrl.searchFor"</span></span></p> 

Wie es verwendet:

<h1>Main Window</h1> 
<search-input on-start-search="$ctrl.startSearch(value)"></search-input> 
<search-result search-for="nothing-ext"></search-result> 

Keine der nothing-* Werte ist evers gezeigt.

Irgendwelche Ideen, was ist los?

Answer 1

Die Verwendung Ihrer Komponente ist nicht korrekt. Wenn Sie eine Zeichenfolge übergeben wollen, sollten sie zitiert werden:

<search-result search-for="'nothing-ext'"></search-result> 

Dann nächste Problem ist, dass diese Linie

<p>SearchResult for <span ng-model="$ctrl.searchFor"</span></span></p> 

keinen Sinn macht, als ngModel Richtlinie für Eingangskontrollen nur gültig ist. Sie wollen ngBind oder einfach {{ $ctrl.searchFor }}:

<p>SearchResult for <span ng-bind="$ctrl.searchFor"</span></span></p>