Model not updated when view changes

Question

I have a form for creating new records in a partial which I load in my main view like this

<div ng-controller="NewProductController">
  <ng-include src=" 'views/partials/product-form.html' "></ng-include>
</div>

In the form, I have some input fields

..
<input ng-model="cip" type="text" id="cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>
<input ng-model="name" type="text" id="name" class="form-control" placeholder="Enter the name" />

And in my controller, I'm sending a POST request with the values of the input fields:

...
.controller('NewProductController', function(Product, $scope) {

  $scope.create = function () {
    Product.create( {'cip': $scope.cip,
                     'name': $scope.name,
                     'dosage': $scope.dosage,
                     ...
                     });
    };

The problem is that when the values of the input fields change, it is not reflected in the controller ($scope.cip and $scope.name are undefined unless I initialized them with some value) but when $scope.cip and $scope.name are changed in the controller, the changes are correctly reflected in the view.

I thought that kind of updates are automatic or am I missing something ?

Chandermani · Accepted Answer · 2013-08-24 12:41:57Z

1

The reason why this is happening because ng-include creates a child scope. Since you are managing the model fields in the child scope i.e inside the template html, the fields are not available on the parent scope, where your controller is defined.

To fix this issue first and foremost thing that you need to do would be to create a obj such as product and define it on the controller NewProductController scope.

$scope.product={};

The template then should bind to sub properties of this product object.

<input ng-model="product.cip" type="text" id="cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>

Now your changes would be available in the parent product object.

You can improve it a bit by passing the product object using ng-init like this

<ng-include src=" 'views/partials/product-form.html' " ng-init='model=product'></ng-include>

Now your template input fields change to

<input ng-model="cip" type="text" id="model.cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>

Advantage You template is not dependent on the structure of parent model class. Dependency is explicit. The template becomes more reusable as it clearly defines the model it works with, like in your case the template works with Product model.

For the sake of completeness of the answer i must link to this must read article, Understanding Scopes

edited Aug 24, 2013 at 12:41

answered Aug 24, 2013 at 12:16

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shiru Over a year ago

Your explanations were very helpful. Thanks a lot.

Collectives™ on Stack Overflow

Model not updated when view changes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related