コンポーネント内のAngular JSデータバインディングが機能しない

私は、Angular JS 1.5.6コンポーネントを使用して動的にフォームを構築しています。階層構造は次のとおりです。index.htmlは、入力とボタンのような単一のコンポーネントを呼び出すコンポーネントmy-formを呼び出すcomponent my-viewを呼び出します。コンポーネント内のAngular JSデータバインディングが機能しない

入力コンポーネントの変更がmy-viewコンポーネントに考慮されていないため、データバインディングが機能しないという問題があります。

私は奇妙な動作をしていますが、入力値を更新するたびに、コンポーネントの機能を表示するための呼び出しが行われます。

私はplunkeredを持っています。送信ボタンはconsole.logを起動します（実際に動作するには、firebugを開く必要があります）。ここで

は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>

である私のindex.htmlここ

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

されている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; 
    } 

})();

出典

2016-06-21 Mouss

（$ ctrl.formElementsを）。それはplunkerにあります。

<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>'

出典

2016-06-23 07:20:03 Mouss

form-elements構文は非常に、雑然とすることは困難と思われます読んで、このシナリオでは動作しないようです。代わりにこれを使用します。

<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私は2ウェイ結合とし、オブジェクト内のフォーム要素を置く代わりの観点から直接それを置くことによって、私の問題を解決するために管理

出典

2016-06-21 14:13:12 theblindprophet

myView.htmlは、あなたの答えをありがとう、それは質問に答えていません。あなたが提案したことをすることは、私の建築と私の階層を破壊するでしょう。私はいくつかの異なるビューでmy-formコンポーネントを使用することを目的としているため、この階層を持っています。 – Mouss

コンポーネント内のAngular JSデータバインディングが機能しない

答えて

関連する問題