AngularJS model not updating while typing

Question

In the following AngularJS code, when you type stuff into the input field, I was expecting the div below the input to update with what is typed in, but it doesn't. Any reason why?:

html

<div ng-app="myApp">
    <input type="text" ng-model="city" placeholder="Enter a city"  />
    <div ng-sparkline ng-model="city" ></div>
</div>

javascript

var app = angular.module('myApp', []);

app.directive('ngSparkline', function () {
    return {
        restrict: 'A',
        require: '^ngModel',
        template: '<div class="sparkline"><h4>Weather for {{ngModel}}</h4></div>'
    }
});

http://jsfiddle.net/AndroidDev/vT6tQ/12/

Your directive isn't changing the value of the ngModel there for you don't need to set ng-model="city" on your directive, I'd look at @drew_w 's example below and set the ng-sparkline attribute with the value of city — m.e.conroy
– m.e.conroy, Commented Jun 12, 2014 at 16:10

Prasad K - Google · Accepted Answer · 2014-06-12 15:32:07Z

1

Add ngModel to the scope as mentioned below -

app.directive('ngSparkline', function () {
    return {
        restrict: 'A',
        require: '^ngModel',
        scope: {
            ngModel: '='
        },
        template: '<div class="sparkline"><h4>Weather for {{ngModel}}</h4></div>'
    }
});

Updated Fiddle

answered Jun 12, 2014 at 15:32

Prasad K - Google

2,5841 gold badge17 silver badges18 bronze badges

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

1 Comment

Johann Over a year ago

I copied the tutorial code from ng-newsletter.com/posts/directives.html and the sample I copied it from didn't have the scope parameter added although the sample following it did. I read what they posted about why scope is required but it doesn't make sense. Can you explain why it's needed in order for the typed text to show? Thanks a million.

XrXr · Accepted Answer · 2014-06-12 15:30:16Z

1

It should be

template: '<div class="sparkline"><h4>Weather for {{city}}</h4></div>'

since you are binding the model to city

JSFiddle

answered Jun 12, 2014 at 15:30

XrXr

2,0671 gold badge14 silver badges22 bronze badges

Comments

drew_w · Accepted Answer · 2014-06-12 15:38:43Z

The basic issue with this code is you aren't sharing "ngModel" with the directive (which creates a new scope). That said, this could be easier to read by using the attributes and link function. Making these changes I ended up with:

HTML

<div ng-sparkline="city" ></div>

Javascript

app.directive('ngSparkline', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var newElement = '<div class="sparkline"><h4>Weather for {{' + attrs.ngSparkline + '}}</h4></div>';
            element.append(angular.element($compile(newElement)(scope)));
        }
    }
});

Using this pattern you can include any dynamic html or angular code you want in your directive and it will be compiled with the $compile service. That means you don't need to use the scope property - variables are inherited "automatically"!

Hope that helps!

See the fiddle: http://jsfiddle.net/8RVYD/1/

user3620126 · Accepted Answer · 2014-06-12 15:48:26Z

0

template: '<div class="sparkline"><h4>Weather for {{city}}</h4></div>'

answered Jun 12, 2014 at 15:48

user3620126

212 bronze badges

Comments

sphinks · Accepted Answer · 2014-06-12 16:09:14Z

0

the issue is that require option means that ngSparkline directive expects ngModel directive controller as its link function 4th parameter. your directive can be modified like this:

app.directive('ngSparkline', function () {
    return {
        restrict: 'A',
        require: '^ngModel',
        template: '<div class="sparkline"><h4>Weather for {{someModel}}</h4></div>',
        link: function(scope, element, attrs, controller) {
            controller.$render = function() {
                scope.someModel = controller.$viewValue;
            }
        }
    }
});

but this creates someModel variable in scope. that I think isn't necessary for this use case.

fiddle

edited Jun 12, 2014 at 16:09

answered Jun 12, 2014 at 15:53

sphinks

12 bronze badges

Collectives™ on Stack Overflow

AngularJS model not updating while typing

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related