I have developed a custom directive
app.directive('projects', ['projectServices',
function(projectServices) {
var projectController = function() {
var proj = this
projectServices.getProjects()
.success(function(result) {
proj.projects = result.data
proj.projects.map(function(project) {
project.showDetails = false
})
})
.error(function(err) {
console.log('error ' + err)
})
this.toggleProjectDetails = function(project) {
project.showDetails = !project.showDetails
}
}
return {
restrict: 'E',
templateUrl: '/partials/project',
controller: projectController,
controllerAs: 'projectCtrl'
}
}
])
The template layout is as follows
div(ng-repeat='project in projectCtrl.projects')
p(style='margin-bottom:0px') {{project.title}}
span.italic {{project.start_date | date}} - {{project.end_date | date}}
p {{project.abstract}}
a.btn-xs(style='color:black' ng-click='projectCtrl.toggleProjectDetails(project)')
i.fa.fa-angle-double-down
p(ng-show='{{project.showDetails}}') {{project.details}}
The projects data structure looks like this:
[{
"title" : "Project Title",
"abstract" : "Brief description of the project",
"details" : "Lorem ipsum blah blah blah",
"start_date" : ISODate("2014-07-02T11:07:34.000Z"),
"end_date" : ISODate("2014-07-02T11:07:34.000Z"),
"links" : [
{
"title" : "link name",
"url" : "www.google.com"
}
]
},...]
The issue I am facing is that when I trigger the toggleProjectDetails function, it executes successfully but the corresponding section of the page is not updated. It seems like the ng-show is not being re-evaluated.
Can anyone help me identify what's missing in my setup?
You can view a demo through this Plunker link.