자세한 정보가 필요하거나 무엇인가를 명확히하기를 원한다면 알려주십시오. 나는 이것을 알아 내기 위해 많은 다른 것들을 시도했지만 해결책을 찾지 못했습니다.AngularJS 중첩 된 지시문에서 양방향 데이터 바인딩
저는 angularJS에 비교적 익숙하며 여러 계층의 데이터로 앱을 제작하려고합니다. 컨트롤러의 PageController에서 본체의 범위에 저장된 기본 사용자 정보가 있습니다. 그런 다음 템플릿 목적을위한 몇 가지 사용자 지정 지시문을 포함하는 $ routeParams (컨트롤러 SettingsController 사용)를 사용하여로드되는 설정 양식을 갖습니다. 지시문이 중첩되어 있으므로 첫 번째 부분의 두 번째 항목을로드하기 위해 transclusion을 사용하고 있습니다. 이 모든 것이 제대로 작동하는 것 같습니다.
내 문제는 내측 지시문 내에서 user.firstname 필드를 참조하려고하며 양방향 데이터 바인딩을 사용하여 텍스트 상자에 대한 변경을 허용하여 PageController 범위의 값도 변경되도록 허용하려고합니다. 나는 이런 종류의 문제들이 ng-model에서 primitives를 사용함으로써 야기된다는 것을 알고 있지만, 나는 여분의 객체 안에 모든 것을 넣으려고 시도했기 때문에 prototypal 상속을 사용할 수 없게 만들었습니다. 여기서 내가 뭘 잘못하고 있니?
내 코드는 JSFiddle이며 가능한 한 줄여서 문제를 해결합니다. 이 예에서는 PageController 범위에 직접있는 외부 텍스트 상자에 입력하면 해당 텍스트 상자가 수정 될 때까지 내부 텍스트 상자가 수정되어 연결이 끊어집니다. 이것은 다른 질문에 설명 된대로 프리미티브를 사용하는 문제와 같지만 문제가있는 곳을 파악할 수 없습니다.
HTML :
<body class="event-listing" ng-app="app" ng-controller="PageController">
<div class="listing-event-wrap">
<input type="text" ng-model="user.firstname" />
<div ng-controller="SettingsController">
<section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
<div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" value="user.firstname"></div>
</section>
</div>
</div>
</body>
각도 지침 :
app.directive('formrow', function() {
return {
scope: {
label: "@label",
type: "@type",
value: "=value"
},
replace: true,
template: '<div class="form-row">' +
'<div class="form-label" data-ng-show="label">{{label}}</div>' +
'<div class="form-entry" ng-switch on="type">' +
'<input type="text" ng-model="value" data-ng-switch-when="textInput" />' +
'</div>' +
'</div>'
}
});
app.directive('block', function() {
return {
scope: {
title: "@title",
description: "@description"
},
transclude: true,
replace: true,
template: '<div class="page-block">' +
'<h2 data-ng-show="title">{{title}}</h2>' +
'<p class="form-description" data-ng-show="description">{{description}}</p>' +
'<div class="block-inside" data-ng-transclude></div>' +
'</div>'
}
});
각도 컨트롤러 :
app.controller("PageController", function($scope) {
$scope.user = {
firstname: "John"
};
});
app.controller("SettingsController", function($scope) {
$scope.data = {
updateInfo: {
title: "Update Your Information",
description: "A description here",
labels: {
firstname: "First Name"
}
}
}
});
빠른 응답을 보내 주셔서 감사합니다. 나는 바이올린을 시도했지만 그것은 내가 올린 것과 똑같은 것을하는 것처럼 보인다. 기능 분리 스코프로 변경하려는 목표는 무엇입니까? – princjef
refobj를 추가 했으므로 지시어 내에서 'firstname'을 호출 할 필요가 없으므로 이것이 일반화되기를 바랍니다. – Nir
정말 똑똑합니다! 점 대신 배열 표기법을 사용하는 것에 대해 생각하지 않았습니다. 이것은 나의 필요를 위해 작동 할 것이다. 감사! – princjef