Angular JS Datenbindung in der Komponente funktioniert nicht

Ich verwende Angular JS 1.5.6 Komponenten, um dynamisch ein Formular zu erstellen. Die Hierarchie ist die folgende: index.html ruft die Komponente my-view auf, die die Komponente my-form aufruft, die unitäre Komponenten wie Eingaben und Schaltflächen aufruft.Angular JS Datenbindung in der Komponente funktioniert nicht

Das Problem ist, dass die Datenbindung nicht funktioniert, da keine Änderung in Eingabe-Komponenten in My-View-Komponente nicht berücksichtigt wird.

Außerdem habe ich ein seltsames Verhalten, jedes Mal, wenn ich den Eingabewert aktualisiere, wird ein Aufruf gemacht, um die Komponentenfunktion anzuzeigen.

Ich habe plunkered dies die Schaltfläche submit console.log triggert (so müssen Firebug öffnen, um es in Aktion zu sehen).

Hier ist meine index.html

<body ng-app="MyApp"> 
    <my-view></my-view> 
</body>

Hier ist myView.html

<div class="container"> 
    <h2>With component myform</h2> 
    <my-form form-elements=" 
    [{type:'input', label:'First name', placeholder:'Enter first name',model:$ctrl.userData.firstName, id:'firstName'}, 
    {type:'input', label:'Last name', placeholder:'Enter last name',model:$ctrl.userData.lastName, id:'lastName'}, 
    {type:'button', label:'Submit', click:$ctrl.click()}]"></my-form> 
</div> 

<div class="container"> 
    <h2>Check data binding</h2> 
    <label>{{$ctrl.userData.firstName}}</label> 
    <label>{{$ctrl.userData.lastName}}</label> 
</div>

Hier ist myView.js

(function() { 
    'use strict'; 

    angular.module('MyApp').component('myView', { 
    templateUrl: 'myView.html', 
    controller: MyViewController, 
    bindings: { 
     viewFormElements: '<' 
    } 
    }); 

    function MyViewController() { 
    this.userData = { 
     firstName: 'François', 
     lastName: 'Xavier' 
    }; 

    function click() { 
     console.log("Hello " + this.userData.firstName + " " + this.userData.lastName); 
    } 

    this.click = click; 
    } 

})();

Quelle

2016-06-21 Mouss

schaffe ich es mein Problem mit 2-Wege zu lösen Bindung und durch Formelement in einem Objekt setzen, anstatt sie direkt in der Ansicht setzen ($ ctrl.formElements). Es ist auf plunker.

myView.html

<div class="container"> 
    <h2>With component myform</h2> 
    <my-form form-elements=$ctrl.formElements></my-form> 
    </div> 
    <div class="container"> 
    <h2>Check data binding</h2> 
    <label>{{$ctrl.formElements}}</label><br /> 
</div>'

Quelle

2016-06-23 07:20:03 Mouss

Die form-elements Syntax scheint sehr unübersichtlich, schwer zu lesen, und scheint in diesem Szenario nicht zu funktionieren. Verwenden Sie stattdessen:

<input type="text" placeholder="Enter first name" ng-model="$ctrl.userData.firstName" id="firstName"> 
<br> 
<input type="text" placeholder="Enter last name" ng-model="$ctrl.userData.lastName" id="lastName"> 
<br> 
<input type="button" value="Submit" ng-click="$ctrl.click()">

Pluker: http://plnkr.co/edit/fnZEcS8WXnb48a2I3M2M?p=preview

Quelle

2016-06-21 14:13:12 theblindprophet

Vielen Dank für Ihre Antwort, aber es die Frage nicht beantworten. Das zu tun, was Sie vorschlagen, würde meine Architektur und meine Hierarchie durchbrechen. Ich habe diese Hierarchie, weil das Ziel darin besteht, die My-Form-Komponente in verschiedenen Ansichten zu verwenden. – Mouss

Angular JS Datenbindung in der Komponente funktioniert nicht

Antwort

Verwandte Themen