Angular 1.5 Komponente Expression ‚undefined‘ in Attribut

Question

Ich versuche AngularJS 1.5-Komponenten zu verwenden, aber jedes Mal erkläre ich bindings ich erhalte immer diese Fehlermeldung:

Expression 'undefined' in attribute 'message' used with directive 'homeComp' is non-assignable!

Ich bin eine einfache Komponente versucht, nur um zu lernen es ist dies der Code:

var component = { 
    bindings: { 
     message: '=' 
    }, 
    controllerAs: 'vm', 
    controller: function MainController() { 
    this.message = 'Welcome to my component'; 

    function debug() { 
     this.message = 'This message changed'; 
    } 
    this.debug = debug; 
    }, 
    template: [ 
    'Message: {{ vm.message }}<br />', 
    '<button ng-click="vm.debug()">Change message</button>' 
    ].join(``) 
}; 

Sie hier, um den Fehler zu sehen: http://plnkr.co/edit/uutk5kxOVpa5eLfjoa8U?p=preview

Was mit dem Code falsch? Oder was verursacht diesen Fehler? Wenn ich die Bindungen entferne, erscheint der Fehler nicht und ich kann die Nachricht ändern.

Answer 1

Die Option binding in Ihrer Komponente muss nicht verwendet werden, wenn die referenzierte Eigenschaft nur von der Komponente selbst verwendet wird.

Durch die Verwendung von binding mit dem = für die message Eigenschaft, werden Sie ausdrücklich zu sagen, die Richtlinie, dass der Parameter eine Zweiweg-Bindung ist, was bedeutet, dass es in der Eltern HTML festgelegt werden, und dass Änderungen an der message Eigenschaft sollte in den HTML-Code zurückgeschrieben werden. Da das <home-comp> -Tag keine message -Eigenschaft hat, ist das HTML nicht zuweisbar (kann nicht zurückgeschrieben werden).

Es gibt drei Möglichkeiten, diesen Fehler zu beheben:

1. Erzwingen die <home-comp message="default message"> Anforderung und immer die Eigenschaft in der HTML bereitzustellen.
2. Definieren Sie die binding als optional, indem Sie message: '=?' verwenden.
3. Entfernen Sie die message Eigenschaft aus dem binding vollständig, wenn es nicht aus dem HTML festgelegt werden soll.

More info from the docs.

Answer 2

Dies liegt daran, dass Sie die Nachricht als eine 2-Wege-Bindung definiert haben, aber Ihr HTML-Code keine Bindung bietet.

Diese Zeile:

<home-comp></home-comp> 

sollte

<home-comp message='myMessageVariable'></home-comp> 

sein Und Sie brauchen myMessageVariable irgendwo in den Rahmen zu erklären.