AngularJS Directive - How to refresh template after async data load
22,173
Solution 1
Solution:
- You don't need another $watch,
scope: { walks: '=walkmap' }is already watching. - When using
ngOptionsyou must usengModeltoo. - 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>'
};
});
Solution 2
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>
Author by
blomster
Updated on July 05, 2022Comments
-
blomster almost 2 years
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>