Apply jQuery code after directive template is available on DOM - angularjs

Question

I have the following Directive:
appDirective.directive('sidebar', function () {
var directiveDefinitionObject = {
//return {
restrict: 'E',
replace: true,
template: '<li ng-repeat="m in menu" ng-class="{\'dropdown\':m.submenu, \'open\':m.open}">' +
'<a href="{{m.url}}" ng-class="{\'dropdown-toggle\':m.submenu}" ng-attr-data-toggle="{{m.type}}">' +
'<i class="{{m.image}}"></i>' +
' {{m.name}}' +
'<b class="caret" ng-if="m.submenu"></b>' +
'</a>' +
'<ul ng-if="m.submenu" class="dropdown-menu">' +
'<li ng-repeat="s in m.submenu"><a ng-class="{\'active\':s.active}" href="{{s.url}}"><i class="{{s.image}}"></i> {{s.name}}</a></li>' +
'</ul>' +
'</li>',
link: function (scope, elem, attrs) {
scope.menu = [
{
"name": "Dashboard",
"url": "/manage/dashboard/index",
"image": "fa fa-dashboard",
"type": "dropdown",
"open": dashboardOpen,
"submenu": [
{
"name": "Overview",
"active": dashboard_overview_active,
"url": "/manage/dashboard/index",
"image": "fa fa-circle-o"
},
{
"name": "System Performance",
"active": dashboard_overview_nodes,
"url": "/manage/dashboard/nodes",
"image": "fa fa-tasks"
},
{
"name": "Query Performance",
"url": "/manage/dashboard/index",
"image": "fa fa-bolt"
}
]
},
{
"name": "Data Integration",
"url": "/manage/dataintegration/index",
"image": "fa fa-table"
},
{
"name": "User Management",
"url": "/manage/users/index",
"type": "dropdown",
"image": "fa fa-users",
"open": usersOpen,
"submenu": [
{
"name": "Users",
"active": users_users,
"url": "/manage/users/index",
"image": "fa fa-user"
},
{
"name": "Roles & Permissions",
"active": users_roles,
"url": "/manage/users/roles",
"image": "fa fa-lock"
},
{
"name": "Organizations",
"active": users_orgs,
"url": "/manage/users/organizations",
"image": "fa fa-globe"
}
]
},
{
"name": "Logs and Alerts",
"url": "/manage/logger/index",
"image": "fa fa-bars"
}
];
scope.$watch('menu', function(val) {
console.log(val);
$('.dropdown').on('show.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hide.bs.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
})
}
}
return directiveDefinitionObject;
});
I've added some jQuery code to the $watchfunction that I want to run after the directive has actually drawn the template. However the $watch fires before the elements are added to the DOM.

Answer 1

This is not the way we should work with angular. When working with angular, we should attach event handler though directives like ng-click and ng-change.
In your case, when the model changes, there is no guarantee that the view already finishes rendering. The view also listens to changes to your model as your code does by using $watch. When the model changes, it will notify the view and your code separately. Usually, there is a trick by using $timeout to schedule the work for the next cycle. But I think we could take advantage of jQuery event delegation to deal with dynamic elements.
Try setting replace: false and use event delegation. Don't need $watch
elem.on('show.bs.dropdown','.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
elem.on('hide.bs.dropdown','.dropdown', function (e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
Using $watch in your case has another downside that multiple event handlers may be added to the same element because every time the model changes, this code will be run again.