AngularJS Directive - How to refresh template after async data load

Question

I forked and edited a plunker from this question

What I'm trying to do is to get the SELECT element (combo box) to update/populate once the data has loaded, but something is not right. I retrieve the data, and it is on the scope of the SELECT element, but the template is not refreshing to show the data. Could someone have a look for me and tell my why the template doesn't refresh?

Thanks very much.

The directive:

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    scope: { walks: '=walkmap' },
    template: '<select data-ng-options="w.postalCode for w in walks"></select>',
    link: function(scope, element, attrs)
    {
      scope.$watch('walks', function (walks) {
                scope.walks = walks;
                console.log('watch triggered');
                console.log(scope.walks);


            });

    }
  };
});

The Index.html:

<body ng-controller="MainCtrl">
    <h1>The Walks Data:</h1>
    <div walkmap="store.walks"></div>
  </body>

Community · Accepted Answer · 2017-05-23 10:26:52Z

3

Solution:

You don't need another $watch, scope: { walks: '=walkmap' } is already watching.
When using ngOptions you must use ngModel too.
angularjs ng-options not working
Working with select using AngularJS's ng-options

here is a plunker:

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    scope: { walks: '=walkmap' },
    template: '<select ng-model="selected" data-ng-options="w.postalCode for w in walks"></select>'
  };
});

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Jan 20, 2014 at 14:41

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

Comments

shanks · Accepted Answer · 2014-01-21 00:27:33Z

1

The problem is with your template. You are yet to define a model which is very important

this should work.

<select data-ng-model="w" data-ng-options="w.postalCode for w in walks"></select>

edited Jan 21, 2014 at 0:27

answered Jan 20, 2014 at 14:48

shanks

94213 silver badges24 bronze badges

Collectives™ on Stack Overflow

AngularJS Directive - How to refresh template after async data load

2 Answers 2

Solution:

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related