アングル マテリアルを使用してモーダルでフォームを表示したいのですが、単純にコントローラーが無視されます。
モーダルの外側では、正常に動作しますが、モーダルだけがこの問題を引き起こします..
私は何を間違えましたか?
アイデアはありますか?
angular.module('adminApp.forms', ['formly', 'formlyBootstrap', 'adminApp.services'], function config(formlyConfigProvider) {
formlyConfigProvider.setType({
name : 'repeatSection',
templateUrl : 'repeatSection.html',
controller : function($scope) {
$scope.formOptions = {formState: $scope.formState};
$scope.addNew = addNew;
$scope.copyFields = copyFields;
function copyFields(fields) {
return angular.copy(fields);
}
function addNew() {
$scope.model[$scope.options.key] = $scope.model[$scope.options.key] || [];
var repeatsection = $scope.model[$scope.options.key];
var lastSection = repeatsection[repeatsection.length - 1];
var newsection = {};
// if (lastSection) {
// newsection = angular.copy(lastSection);
// }
repeatsection.push(newsection);
}
}
});
})
.controller('FormsController', function($scope, $mdDialog){
$scope.addField = function(ev){
$mdDialog.show({
parent : angular.element(document.body),
controller : FormsBuilder,
ariaLabel : 'Adicionar Campo',
targetEvent : ev,
clickOutsideToClose : true,
templateUrl : 'partials/tpl/fields.html',
})
function FormsBuilder($scope, FIELDS) {
console.log('start!')
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
init();
//vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
console.log('submit!');
return
$scope.field = new FIELDS(vm.model);
$scope.field.$save(function(){
$scope.showToast('Field Group ....Criado!');
});
}
function init() {
console.log('init!')
vm.model = {
fields: []
};
vm.fields = [
{
"key": "fieldGroup-name",
"type": "input",
"templateOptions": {
"placeholder": "Nome do Grupo",
"label": "One add-on on the left (icon)"
}
},
{
type: 'repeatSection',
key: 'fields',
templateOptions: {
btnText:'Adicionar novo campo',
fields: [
{
className: 'row',
fieldGroup: [
{
className: 'col-xs-4',
type: 'input',
key: 'fieldName',
templateOptions: {
label: 'Nome do campo:'
}
},
{
type: 'input',
key: 'fieldSlug',
className: 'col-xs-4',
templateOptions: {
label: 'Slug do campo:'
}
}
]
},
{
"type": "select",
"key": "Fieldtype",
"templateOptions": {
"label": "Field Type",
"required": true,
"options": [
{
"name": "Text Field",
"value": "input"
},
{
"name": "TextArea Field",
"value": "textarea"
},
{
"name": "Radio Buttons",
"value": "radio"
},
{
"name": "Checkbox",
"value": "checkbox"
}
]
}
},
{
type: 'checkbox',
model: 'formState',
key: 'selfExecuting',
templateOptions: {
label: 'Are you executing this trade?'
}
},
{
hideExpression: '!formState.selfExecuting',
fieldGroup: [
{
type: 'input',
key: 'relationshipName',
templateOptions: {
label: 'Name:'
}
},
{
type: 'select',
key: 'complianceApprover',
templateOptions: {
label: 'Compliance Approver:',
options: [
{
name: 'approver 1',
value:'some one 1'
},
{
name: 'approver 2',
value:'some one 2'
}
]
}
},
{
type: 'textarea',
key: 'requestorComment',
templateOptions: {
label: 'Requestor Comment',
rows: 4
}
}
]
}
]
}
}
];
}
}
};
});
モーダル テンプレート:
<md-dialog aria-label="Adicionar Campo">
<md-dialog-content>
<h1>Nome do Grupo: {{vm.exampleTitle}}</h1>
<form ng-submit="vm.onSubmit()" novalidate>
<formly-form model="vm.model" fields="vm.fields" form="vm.form">
<md-button type="submit" class="md-raised md-primary">Salvar</md-button>
</formly-form>
</form>
</md-dialog-content>
</md-dialog>
<script type="text/ng-template" id="repeatSection.html">
<div>
<div class="{{hideRepeat}}">
<div class="repeatsection" ng-repeat="element in model[options.key]" ng-init="fields = copyFields(to.fields)">
<formly-form fields="fields" model="element" bind-name="'formly_ng_repeat' + index + $parent.$index">
</formly-form>
<div style="margin-bottom:20px;">
<md-button type="submit" class="md-raised md-primary" ng-click="model[options.key].splice($index, 1)">Remover campo</md-button>
</div>
<hr>
</div>
<md-button type="button" class="md-raised md-primary" ng-click="addNew()" >{{to.btnText}}</md-button>
</div>
</script>
解決済み:
$mdDialog.show({
parent : angular.element(document.body),
controller : FormsBuilder,
controllerAs : 'vm',
ariaLabel : 'Adicionar Campo',
targetEvent : ev,
clickOutsideToClose : true,
templateUrl : 'partials/tpl/fields.html',
})