Why is the view not reflecting the updates made to the model?

Question

Why is the view not reflecting the updates made to the model?

I recently started delving into Angular JS and have been following tutorials to learn it.

One issue I'm facing is that my model doesn't seem to update the view. Can anyone help me figure out why this is happening?

Here is the code snippet:

<!DOCTYPE html>

<div ng-controller="MyContr">
    {{xxx}}
</div>


<input type="text"  ng-model="xxx" ng-controller="MyContr" />
    <script>
    var app = angular
              .module("MyApp", [])
              .controller("MyContr", function ($scope) {
                  var xxx="Alexander"
                  $scope.xxx = xxx;
                 });
</script>

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

It appears from the code provided in the question that MyContr is being called twice,

The first instance is here:

<div ng-controller="MyContr">
    {{xxx}} <!-- xxx (instance 1) -->
</div>

and the second instance is here:

<!-- xxx (instance 2) --> 
<input type="text"  ng-model="xxx" ng-controller="MyContr" />

This means that two separate instances of the same controller are being created, resulting in each instance having its own unique xxx variable.

To resolve this issue:

Option 1 - Data sharing between instances can be achieved by referring to resources like Share data between AngularJS controllers and AngularJS: How can I pass variables between controllers?.

Option 2 - To address the problem, enclose both HTML elements within a single instance of MyContr as illustrated below:

<span ng-controller="MyContr">
    <div>
        {{xxx}}
    </div>
    <input type="text"  ng-model="xxx" />
</span>

Answer 2

It appears from the code provided in the question that MyContr is being called twice,

The first instance is here:

<div ng-controller="MyContr">
    {{xxx}} <!-- xxx (instance 1) -->
</div>

and the second instance is here:

<!-- xxx (instance 2) --> 
<input type="text"  ng-model="xxx" ng-controller="MyContr" />

This means that two separate instances of the same controller are being created, resulting in each instance having its own unique xxx variable.

To resolve this issue:

Option 1 - Data sharing between instances can be achieved by referring to resources like Share data between AngularJS controllers and AngularJS: How can I pass variables between controllers?.

Option 2 - To address the problem, enclose both HTML elements within a single instance of MyContr as illustrated below:

<span ng-controller="MyContr">
    <div>
        {{xxx}}
    </div>
    <input type="text"  ng-model="xxx" />
</span>

Why is the view not reflecting the updates made to the model?

Answer №1

Similar questions

Ensuring Consistent Item Widths in a Loop using JavaScript or jQuery

Allow editing for only a specific part of a text box

Is there anyone available to assist me with this contact validation form?

Conceal a request URL within JavaScript through the use of Laravel/Ajax

Add the content script to a webpage just one time

Exploring the object structure received from AngularFire

In Angular, the `Get` function will return an array, not an object

tips for recognizing the selected element

The AngularJS directive "ng-include" is used to dynamically

Is there a way to seamlessly update button values in VueJs from an api request without needing to reload the page or manually clicking something? Or perhaps there is an alternative method to achieve this?

Is there a way to define type information for a global variable when utilizing dynamic import within a function?

Testing the functionality of an Express Rest API with Mocha unit tests

When using res.json(), the data is returned as res.data. However, trying to access the _id property within it will result

Is it possible to simultaneously toggle buttons and submit a form?

Unable to retrieve req.body data, despite having body-parser enabled

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

Linking a live-generated HTML to the scope's data model

Error: The post request was blocked due to cross-origin restrictions

Is it possible to make a div jump or bounce if it has a flex display?

Tips for updating multiple fields in Prisma ORM