Ways to reset a form within an ng-include section

Question

Ways to reset a form within an ng-include section

I am facing an issue with my html template, where a reusable modal is included using ng-included like this:

myPartial.html

... SOME HTML ...
<ng-include src="'form.html'"></ng-include>

modal.html

...
<form>
  <input ng-model="comment.value" />
  <button type="submit" ng-click="save(comment.value)" />
</form>
...

I am trying to figure out the best way to clear the form, especially from the controller. I want to clear the form within my save() method after a successful http call, but due to ng-include creating its own scope, I am unsure how to achieve this.

You can see the problem in action on this plunker: http://plnkr.co/edit/zkxZOZr3f7sHJZfCiuoT?p=preview

If you directly place the contents of form.html into index.html, it works as expected.

javascript angularjs

Answer 1

Answer №1

You're almost there! Make sure to initialize the comment instance in your controller and update the correct value in save. The behavior you're seeing is known as "prototypal inheritance" and you can learn more about it at Understanding scopes. This concept isn't limited to just AngularJS, but also exists in regular JavaScript.

angular.module('app', []).controller('appcontroller', function($scope) {

  // create comment
  $scope.comment = { value: 'test' };
  $scope.save = function(value) {
    console.log('in here ');

    // Update comment.value instead of just comment.
    $scope.comment.value = null;
  };
});

I made some changes to your plunker demo.

Answer 2

You're almost there! Make sure to initialize the comment instance in your controller and update the correct value in save. The behavior you're seeing is known as "prototypal inheritance" and you can learn more about it at Understanding scopes. This concept isn't limited to just AngularJS, but also exists in regular JavaScript.

angular.module('app', []).controller('appcontroller', function($scope) {

  // create comment
  $scope.comment = { value: 'test' };
  $scope.save = function(value) {
    console.log('in here ');

    // Update comment.value instead of just comment.
    $scope.comment.value = null;
  };
});

I made some changes to your plunker demo.

Ways to reset a form within an ng-include section

Answer №1

Similar questions

Ionic causing delay in updating ngModel value in Angular 2

Personalized selection in React with list filtering

Having trouble retrieving attributes from Typed React Redux store

Is there a way to trigger a button's onclick function when its value is changed using the onchange event?

Issues with displaying ngAnimate animations

What are the steps to implement string interpolation within a template element in Vue.js?

Vue component fails to react to updates from Vuex

Configuring Proxy Settings for WebpackDevServer

Can someone explain why this error code 500 is showing up in my React Native development server's response?

Guidance on incorporating a function as a prop in React using TypeScript

Confirming the data in every cell across each row of SlickGrid

Exploring the differences in jQuery

What is the best way to interact with parent elements inside an iframe?

Execute JavaScript function only if it is the final invocation

Swapping out the "select file" and "add file" buttons for a single unified button

Strategies for managing a disruption during the processing of a form submission that is saving data to the database

Wavy CSS Animation

Is there a way to extract a particular value from a JSON URL and transfer it to a JavaScript variable?

How can I effectively store and compare previous API responses with new ones in a Node.js environment?

Click on an item in the list to remove it from the list