AngularJS Two-way Data Binding in Nested Directives

前端未结

关注

 3  995

Please let me know if you need more information or want me to clarify anything. I have tried a lot of different things to figure this out but haven\'t found a solution.

相关标签:

3条回答

余生分开走

2021-02-20 06:24
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
庸人自扰

2021-02-20 06:37

The problem is caused by ng-switch, From the doc Understanding scope from git.

ng-switch scope inheritance works just like ng-include. So if you need 2-way data binding to a primitive in the parent scope, use $parent, or change the model to be an object and then bind to a property of that object. This will avoid child scope hiding/shadowing of parent scope properties.

so if you type some text in the textbox. below code will be executed for the ng-switch scope.

$scope.value="the text you typed"

So it will not consult the prototype chain to search value .this will created a new property for ng-switch scope.

How to testify it ?

If you change value to $parent.value. everything will work fine. because in the ng-switch for the primitive type (angularjs would recognize the value as primitive type if there is no dot )$parent will refer to formrow directive scope.

Try to remove the ng-switch or do as the doc says. the problem will disappear.

And more important, the document recommend us always use a dot . to refer the model when apply a bi-directional binding.

If I said something wrong . Please kindly correct me and make it right .thanks.

0 讨论(0)
发布评论:

提交评论
- 加载中...

不思量自难忘°

2021-02-20 06:47

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>'
    }

0 讨论(0)