wendellmva
wendellmva

Reputation: 1944

AngularJS : ng-model not binding two ways when inside a directive

I have read some posts here on so regarding this subject but all the answers and all of the fiddles I saw not one working properly. I got my plunkr to bind one-way from the dynamically generated field bound through ng-model inside an directive isolated scope to the form in the parent. However is does not bind from the form back to the directive. My initial values are disregarded, so are the changes I make inside the parent scope and I would really like a solution. Here's a code fragment.

        <div ng-repeat="field in fields">
            <app-field field="field" ng-model="selected[field.name]" form="form"></app-field>
        </div>

...     
            .directive("appField", function($http, $compile) {
                return {
                    restrict: "AE",
                    scope: {
                        field: "=",
                        ngModel: "=",
                        form: "="
                    },
                    link: function($scope, element, attrs) {
                        $http.get("field.html").then(function (result) {
                            element.html(result.data);
                            $compile(element.contents())($scope);
                        });
                    }
                }
           })

Here's my fiddle: http://plnkr.co/edit/ZzC4jS9M9Ev5i6gxUVxB?p=preview

Any help would be appreciated.

Upvotes: 1

Views: 1438

Answers (1)

pespantelis
pespantelis

Reputation: 15372

The property is scope, not $scope. Then, remove the scope:false and you are done!

Also, you can use the templateUrl property instead of link (in this case):

.directive("appField", function($http, $compile) {
        return {
            restrict: "AE",
            scope: {
                field: "=",
                ngModel: "=",
                form: "="
            },
            templateUrl: 'field.html'
        }
})

Upvotes: 1

Related Questions