AngularJS Two-way Data Binding in Nested Directives

Since the textbox in the directive uses a primitive instead of an object for its model (ng-model="value" rather than ng-model="someobj.somevalue"), its model is created only on the local scope and the parent does not have access to it.

The fix is to define the directive textbox model using the dot rule as an object property:

ng-model="value.firstname"

Then pass the whole user object into the directive instead of just the primitive property:

<div formrow ... value="user"></div>

Here is a demo


I'm sorry for the previous code. Try this instead: http://jsfiddle.net/CxNc2/2/

Instead of passing the actual value, I'm now passing the object + a pointer to the correct value inside. I added 'refobject' here:

<body class="event-listing" ng-app="app" ng-controller="PageController">
    <div class="listing-event-wrap">
        <input type="text" ng-model="user.firstname" />
        <div ng-controller="SettingsController">
            <section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
                <div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" refobj='user' value="firstname"></div>
            </section>
        </div>
    </div>
</body>

and I added refobj + value here:

app.directive('formrow', function() {
    return {
        scope: {
            label: "@label",
            type: "@type",
            value: "@value",
            refobj: "="
        },
        replace: true,
        template: '<div class="form-row">' + 
            '<div class="form-label" data-ng-show="label">{{label}}</div>' + 
            '<div class="form-entry" ng-switch on="type">' + 
        '<input type="text" ng-model="refobj[value]" data-ng-switch-when="textInput" />' + 
            '</div>' + 
        '</div>'
    }

Tags:

Javascript

Data Binding

Web Applications

Angularjs

Angularjs Scope

Recent Posts