CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
markthethomas
markthethomas

Reputation: 4431

2-way data binding between partials in angularjs

Looking to solve what seems to be a fairly straightforward problem, but not sure how to proceed.

I've written a simple one-page angular app and recently started switching it over to ui.router (of the awesome angular-ui variety). For the requirements of the app, it allows me to do far more than the regular ngRoute module does (especially with nested views).

After transitioning it over, I've found that I'm having trouble getting data to bind between partials. I have a main view with several sub-views that would need to be able to do live data binding between them. This wasn't a problem before, since each of the components existed in one view (I split them up into sub-views/partials and included them with ui-router).

So, here's what I have set up right now:

main view in index.html with ui-view used to include several partials.

main view
   -form partial
   -preview pane partial
   -review partial
   -submission partial

I've only created one controller to handle this section of the app; the partials seem to work with the data passed by the controller, but not with data binding between each other.

What I need to do is achieve live data binding between an input in the form partial and the preview partial; what's the best way to go about this? A service, directive?

Thanks everyone!

ps: if you're not familiar with UI Router, you can explain in terms of regular ngRoute and I can figure it out

edit: Here's how my states are being set up:

(main area where partials are included, enclosed by an ng-app directive)

<div ng-controller="MainCtrl" class="contstrain_y_scroll">
        <section>
     <div ui-view="form"></div>
     <div ui-view="tribute"></div>
     <div ui-view="submit"></div>
     <div ui-view="sidebar"></div>                   

    </section>
</div>

(in app.js)

        $stateProvider
        .state('main', {
            url: '/',
            controller: 'MainCtrl',
            views: {
                'sidebar': {
                    templateUrl: 'views/partials/main.sidebar.html',

                },
                'form': {
                    templateUrl: 'views/partials/main.form.html',

                },
                'tribute': {
                    templateUrl: 'views/partials/main.tribute.html',
                },
                'submit': {
                    templateUrl: 'views/partials/submit.html',
                }
            }
        })

My controller seems to be working for each partial, but I want to evaluate an expression in one partial (sidebar) based on in input in another (form). Hope this makes my problem a bit clearer; really appreciate the help!

Upvotes: 1

Views: 657

Answers (1)

b0nyb0y
b0nyb0y

Reputation: 1446

One thing I notice is that you have a ng-controller="MainCtrl" declaration on your div.

By default, when you're using ui-router, the controller you specified in your state definition will be applied automatically to the whole page. By declaring it again in HTML, you're basically declaring it twice.

From my understanding, redundant declaration in HTML will very likely create an extra $scope in your DOM. And it can make things behave weirdly. Try removing that and see if it helps.

Upvotes: 4

Related Questions