UPDATE. The problem turned out to be self-inflicted. We should have only have controller assigned to the parent views (edit and new) and the states didn't need to have controllers at all. Once I commented out the controllers in the child views, I was able to save info correctly. More tests will follow tomorrow.


Hi everybody,

We have an editForm with the following code:

 <div class="col-sm-2 panel-container">
                                <ul class="nav nav-pills nav-stacked">
                                    <li data-ui-sref-active="active" class="active">
                                        <a data-toggle="pill" href="" data-ui-sref=".general ">@Labels.general</a>
                                    </li>
                                    <li data-ui-sref-active="active" class="active">
                                        <a data-toggle="pill" href="" data-ui-sref=".contact">@Labels.contact</a>
                                    </li>

                                    <li data-ui-sref-active="active" class="active" data-ng-show="!isNew">
                                        <a data-toggle="pill" href="" data-ui-sref=".invoices">@Labels.invoices</a>
                                    </li>
                                    <li data-ui-sref-active="active" class="active" data-ng-show="!isNew">
                                        <a data-toggle="pill" href="" data-ui-sref=".invoicesToBePaid">    @Labels.payInvoices</a>
                                    </li>
                                    <li data-ui-sref-active="active" class="active" data-ng-show="!isNew">
                                        <a data-toggle="pill" href="" data-ui-sref=".applyFees" ng-class="{true: 'invalid-tab', false: ''}[form.applyFees.$invalid]">    @Labels.applyFees</a>
                                    </li>

                                    <li data-ui-sref-active="active" class="active">
                                        <a data-toggle="pill" href="" data-ui-sref=".userdefined">@Labels.userDefined</a>
                                    </li>
                                    <li data-ui-sref-active="active" class="active">
                                        <a data-toggle="pill" href="" data-ui-sref=".security">@Labels.securityRestrictions</a>
                                    </li>
                                    <li data-ui-sref-active="active" class="active">
                                        <a data-toggle="pill" href="" data-ui-sref=".web">@Labels.web</a>
                                    </li>
                                </ul>
                            </div>

                            <div class="col-sm-10 panel-container">
                                <div data-ui-view data-autoscroll="false"></div>
                                <div data-ui-view="invoices" data-autoscroll="false"></div>
                            </div>

                        </div>

                        <div class="widget-foot">
                            <div ng-show="!isNew">
                                <button class="btn btn-primary" ng-click="save(currentAccount)"
                                        ng-disabled="form.$invalid || disableAction">
                                    @Labels.save
                                </button>
                                <data-delete:button title="{{ '@Labels.delete: ' + currentAccount.acctName }}"
                                                    message="@String.Format(Messages.confirmDelete, Labels.account)"
                                                    disable-action="disableAction"
                                                    delete="delete()">
                                </data-delete:button>
                                <data-cancel:button title="@Labels.unsavedChanges"
                                                    message="@Messages.unsavedChanges"
                                                    cancel="cancel()"
                                                    disable-action="disableAction"
                                                    dirty="form.$dirty">
                                </data-cancel:button>
                            </div>
                            <div ng-show="isNew">
                                <button id="btnAdd" class="btn btn-primary" ng-click="new(currentAccount)"
                                        ng-disabled="form.$invalid || disableAction">
                                    @Labels.add
                                </button>
                                <data-cancel:button title="@Labels.unsavedChanges"
                                                    message="@Messages.unsavedChanges"
                                                    cancel="cancel()"
                                                    disable-action="disableAction"
                                                    dirty="form.$dirty">
                                </data-cancel:button>
                            </div>
                        </div>

The currentAccount is a property defined on the scope. Each of the tab view content is a separate html file using ng-model='currentAccount.someProperty'.

The states are defined in the AccountController.js:

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $stateProvider.state('home', {
            url: '/',
            controller: 'accountsController',
            template: ''
        }).state('edit', {
            url: '/edit/:id',
            controller: 'accountsCrudController',
            templateUrl: '/CustomerAccounts/Accounts/editForm',
            onEnter: function () {
                window.console && console.log('Entering Edit state;');
                }
        }).state('new', {
            url: '/new',
            controller: 'accountsCrudController',
            templateUrl: '/CustomerAccounts/Accounts/editForm',
            onEnter: function () {
                window.console && console.log('Entering New state;');
            }
            })
            .state('edit.general', {
                //url: '/general',
                templateUrl: '/CustomerAccounts/accounts/editAccountGeneral',
                controller: 'accountsCrudController',
                onEnter: function () {
                    window.console && console.log('Entering edit.general state;');
                }
            })
            .state('edit.contact', {
                //url: '/contact',
                templateUrl: '/CustomerAccounts/accounts/editAccountContact',
                controller: 'accountsCrudController'
            })
           
            .state('edit.invoicesToBePaid', {
                //url: '/invoices/payInvoices',
                templateUrl: '/CustomerAccounts/invoices/PayInvoices',
                controller: 'invoicesToBePaidCrudController'
            })
            .state('edit.applyFees', {
                //url: '/invoices/applyFees',
                templateUrl: '/CustomerAccounts/Invoices/ApplyFees',
                controller: 'applyFeesController',
                onEnter: function () {
                    window.console && console.log('Entering edit.applyFees state;');
                }
            })
            .state('edit.userdefined', {
                //url: '/userdefined',
                templateUrl: '/CustomerAccounts/Accounts/EditAccountUserDefined',
                controller: 'accountsCrudController'
            })
            .state('edit.security', {
                //url: '/security',
                templateUrl: '/CustomerAccounts/Accounts/EditAccountSecurity',
                controller: 'accountsCrudController'
            })
            .state('edit.web', {
                //url: '/web',
                templateUrl: '/CustomerAccounts/Accounts/EditAccountWeb',
                controller: 'accountsCrudController'
            })
          .state('new.general', {
              //url: '/general',
              templateUrl: '/CustomerAccounts/Accounts/editAccountGeneral',
              controller: 'accountsCrudController'
          })
            .state('new.contact', {
                //url: '/contact',
                templateUrl: '/CustomerAccounts/Accounts/editAccountContact',
                controller: 'accountsCrudController'
            })
          
            .state('new.invoicesToBePaid', {
                //url: '/invoices/payInvoices',
                templateUrl: '/CustomerAccounts/Invoices/PayInvoices',
                controller: 'invoicesToBePaidCrudController',
                onEnter: function () {
                    window.console && console.log('Entering new.invoicesToBePaid state;');
                }
            })
            .state('new.applyFees', {
                //url: '/invoices/applyFees',
                templateUrl: '/CustomerAccounts/Invoices/ApplyFees',
                controller: 'applyFeesController',
                onEnter: function () {
                    window.console && console.log('Entering new.applyFees state;');
                }
            })
            .state('new.userdefined', {
                //url: '/userdefined',
                templateUrl: '/CustomerAccounts/Accounts/EditAccountUserDefined',
                controller: 'accountsCrudController'
            })
            .state('new.security', {
                //url: '/security',
                templateUrl: '/CustomerAccounts/Accounts/EditAccountSecurity',
                controller: 'accountsCrudController'
            })
            .state('new.web', {
                //url: '/web',
                templateUrl: '/CustomerAccounts/Accounts/EditAccountWeb',
                controller: 'accountsCrudController'
            });
    }]);

So, everything seems to be displayed correctly, so one way binding is working OK. But saving is not working and my guess it's because editForm has one scope and editAccountGeneral, for example, has a different scope.

Do you know how should we resolve this scoping problem?

Thanks a lot in advance.