구성 요소의 각도 JS 데이터 바인딩이 작동하지 않습니다.

저는 Angular JS 1.5.6 구성 요소를 사용하여 동적으로 양식을 작성합니다. 계층 구조는 다음과 같습니다. index.html은 입력 및 버튼과 같은 단일 구성 요소를 호출하는 구성 요소 my-form을 호출하는 구성 요소 my-view를 호출합니다.구성 요소의 각도 JS 데이터 바인딩이 작동하지 않습니다.

입력 구성 요소의 수정 사항이 my-view 구성 요소에 반영되지 않기 때문에 데이터 바인딩이 작동하지 않는 것이 문제입니다.

게다가 이상한 동작이있어서 입력 값을 업데이트 할 때마다 구성 요소 기능을보기 위해 호출이 이루어집니다.

여기에 plunkered이 있습니다. 제출 버튼은 console.log를 트리거합니다 (실제로 작동하는 데는 방화 광구를 열어야합니다). 여기

는 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 나는이 방법 바인딩 및 개체에서 폼 요소를 넣는 대신 뷰에 직접 넣어 내 문제를 해결하기 위해 관리

출처

2016-06-21 14:13:12 theblindprophet

myView.html는 답변 주셔서 감사하지만, 질문에 대답하지 않습니다. 당신이 제안하는 것을하면 내 건축과 계층 구조가 깨질 것입니다. 목표는 여러 가지 다른 견해에서 my-form 구성 요소를 사용하기 때문에이 계층 구조가 있습니다. – Mouss

구성 요소의 각도 JS 데이터 바인딩이 작동하지 않습니다.

답변

관련 문제