Within my code, I have a controller responsible for fetching data asynchronously. This data is then used by a directive in the application.
Unfortunately, there seems to be an issue with the directive not displaying the fetched data properly. Interestingly, when I remove the timeout that simulates the asynchronous process, everything works as expected.
I am now contemplating the best solution to this problem. It appears to be a common scenario and I suspect that my approach may be incorrect. Is there a way to delay the loading of the directive until the scope data has been fully populated?
HTML:
html
head
link(
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css",rel="stylesheet",type="text/css")
title Hello World
body(ng-app="app")
.container
.well.
How should data be passed into a directive when a scope is populated asyncronysly
div(ng-controller="StoogeCtrl")
.panel.panel-default
.panel-heading
| All
.panel-body
ul
li(ng-repeat="stooge in stooges") {{stooge.name}}
.panel.panel-default
.panel-heading
| Noe Moe
.panel-body
div(filter-stooge except="Moe" stooges="stooges")
JavaScript(CoffeeScript):
app = angular.module 'app', []
app.controller 'StoogeCtrl', ($scope, $q, $timeout)->
stooges = [
{name: "Moe"}
{name: "Larry"}
{name: "Curly"}
]
getPromise = ()->
dfd = $q.defer()
dfd.resolve(bars)
dfd.promise
$timeout ()->
$scope.stooges = stooges
app.directive 'filterStooge', ()->
scope:
stooges: '='
except: '@'
template: "<ul )><li ng-repeat='stooge in filtered'>{{stooge.name}}</li></ul>"
link: (scope)->
filtered = []
for stooge in scope.stooges
filtered.push stooge if stooge.name != scope.except
scope.filtered = filtered
Building on the advice from ExpertSystem below, I made the following adjustments to my code:
app = angular.module 'app', []
app.controller 'StoogeCtrl', ($scope, $q, $timeout)->
stooges = [
{name: "Moe"}
{name: "Larry"}
{name: "Curly"}
]
getPromise = ()->
dfd = $q.defer()
dfd.resolve(bars)
dfd.promise
$timeout ()->
$scope.stooges = stooges
$scope.done = true
,
3000
app.directive 'filterStooge', ()->
scope:
stooges: '='
except: '@'
done: '='
template: "<ul><li ng-repeat='stooge in filtered'>{{stooge.name}}</li></ul>"
link: (scope)->
scope.$watch 'done', (newVal, oldVal)->
if newVal
filtered = []
for stooge in scope.stooges
filtered.push stooge if stooge.name != scope.except
scope.filtered = filtered