Why aren't the contained/child elements rendering when using an isolated scope? I suspect that the parent is not rendered yet. I tried adding a $timeout, but still no luck. If I remove the isolated scope by commenting out
scope: {},
it works. How can I make it work with an isolated scope and render the contained elements?
Code: http://plnkr.co/edit/ZEwj9z?p=preview
'use strict';
var app = angular.module('Directives', []);
app.controller('MainCtrl', function ($scope) {
$scope.data = [{id:1}, {id:2}, {id:3}];
});
app.directive('test', function ($timeout) {
return {
restrict: 'A',
scope: {}, //if it is commented out, li would render
link: function (scope, elm, attrs) {
console.log('Inside link..');
}
};
});
template
<div ng-controller="MainCtrl">
<ul test>
<li ng-repeat="d in data"> {{d}} </li>
</ul>
</div>