Reputation: 1944
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
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