0
フィールドセットを含むフォームがあります。フォームにはこのフィールドセットの番号が異なることがありますので、フォームにボタンを追加してください。フォームにフィールドセットがない場合があります。これらの要件を満たすためには、私はディレクティブの継承が必要です。 fieldsetディレクティブはbutton clickイベントに追加されます。 Fieldsetにはテンプレートがありますが、実際の入力フィールドのHTML文字列はページの読み込み時にサーバーから来ています。したがって私は異なるidを持つ入力ボックスを追加してこのフィールドセットをフォームに追加して、その場でフィールドセットを完成させる必要があります。孤立した子ディレクティブの双方向データバインド
このシナリオをより詳しく説明するために、実装を縮小し、以下のコードスニペットを作成しました。ここにはplunkerがあります。
縮小されたシナリオでは、form-Dirディレクティブのみがページの読み込みに存在します。このディレクティブには、IDが増加するフィールドへのボタンがあります。
<body ng-app="mainApp" ng-controller="MainCtrl">
<div form-dir this-page="page" bind-field-id = "fieldId" bind-first-name="firstName" >
This is {{page}} page
<button class='btn-add'> add isolated fields </button>
<div class='field'>
</div>
</div>
</body>
スクリプト
var app = angular.module('mainApp', []);
app.controller("MainCtrl", function($scope){
$scope.page = "Demo"
$scope.fieldId = "2"
$scope.firstName = "John"
});
app.directive("formDir", function($compile) {
return {
restrict:'A',
transclude: false,
scope:{
page:"=thisPage",
id:"=bindFieldId",
firstName:"=bindFirstName"
},
link : function(scope, element, attrs){
scope.page = 'demo2';
element.find('.btn-add').bind('click', function(e){
var field = angular.element(e.currentTarget).siblings('.field')
var newScope = scope.$new();
var ele = '<field-dir bind-field-id = "id" bind-first-name="firstName"></field-dir>';
var directive = $compile(ele)(newScope);
field.append(directive);
console.log('btn clicked', field)
})
}
};
});
app.directive("fieldDir", function() {
return {
restrict:'AE',
transclude: true,
replace: true,
scope:{
id:"=bindFieldId",
firstName:"=bindFirstName"
},
template: '<div></div>',
link : function(scope, element, attrs){
element.append('<label>{{scope.id}} First Name fields </label>'
+' <input type="text" class="textbox" ng-model="firstName">'
+' <button class="btn-change">change first name</button>');
element.find('.btn-change').bind('click', function(e){
scope.$apply(function(){
scope.firstName = "Doe";
scope.id = parseInt(scope.id) + 1;
});
console.log(scope)
})
}
};
});
私はテンプレートにlabel、inputとbuttonタグを配置する場合、コードは動作します。私のシナリオに従って、私はそれを追加する必要があります。私は何が間違っているのか分かりません。