Relationship between parent and child state in angularjs

120 Views Asked by At

I have a problem that is about parent state and child state.I have a button.When i click the button it opens a modal(state:context.form).It is okey but i have another state which is called new(new state is child of context.form state).What i want to do is when i click the button parent state and child state should bu executed together.I think problem is views code blog because instead of views I write another modal It is working

When modal is opened,child state should be shown in the ui-view field. My code:

 .state('context.form', {
        parent: 'context',
        url: '/form',
        data: {
            authorities: ['ROLE_USER']
        },
        onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
            $uibModal.open({
                templateUrl: 'app/entities/context/contextForm.html',
                controller: 'ContextDialogController',
                controllerAs: 'vm',
                abstract: true,
                backdrop: 'static',
                windowClass: 'center-modal',
                size: 'md',
                resolve: {
                    entity: function () {
                        return {
                            name: null,
                            keywords: null,
                            createdAt: null,
                            status: null,
                            id: null
                        };
                    }
                }
            }) 
        }]
    })


      .state('new', {
            parent: 'context.form',
            url: ' ',
            data: {
                 authorities: ['ROLE_USER']
            },
            views: {
                'context.form@': {
                    templateUrl: 'app/entities/context/context-dialog2.html',
                    controller: 'ContextDialogController',
                    controllerAs: 'vm'
                }
            },

        })

contextForm.html

<div class="" style="border-bottom:solid; border-bottom: solid;  height:25px;border-bottom-width: 1px;background-color: #337ab7">

    <button type="button" class="close" data-dismiss="modal" style="margin-right:30px; color:white; margin-top:2px"
        aria-hidden="true" ng-click="vm.clear()">&times;</button>
    <h4 class="modal-title" id="myContextLabel" style="margin-left:20px; color:white"
        data-translate="eventinsightwebApp.context.home.createOrEditLabel">Create
        New Alarm Watch</h4>
</div>

<div id="form-container" style="margin-top:30px">

    <!-- use ng-submit to catch the form submission and use our Angular function -->
    <form id="signup-form">

        <!-- our nested state views will be injected here -->
        <div id="form-views" ui-view></div>
    </form>



</div>

context-dialog2.html

  <div class="form-group">
        <div class="col-md-1"><label data-translate="" style="margin-left:-8px" for="field_publicWatch">Public:</label></div>
    </div>
0

There are 0 best solutions below