ng-repeat in a directive is being linked outside the directive - angularjs

Question

(Lots of similar questions/answers, but couldn't find a solution to this)
Trying to created nested directives. The issue is that the inner directives are being placed above the outer directive.
angular.module('mayofest14ClientApp')
.controller('OrderCtrl', ['$scope',
function ($scope) {
$scope.order = {
activities: [
{formattedTime: '2014-03-04', performedBy: 'matt', action: 'Action', comment: 'Some comment'},
],
};
}
])
.directive('orderActivity', [function () {
return {
scope: {
activities: '=',
},
replace:true,
restrict: 'E',
template:
'<div class="order_activity">' +
' <table>' +
' <caption>order_id History</caption>' +
' <thead>' +
' <tr>' +
' <th>Date</th>' +
' </tr>' +
' </thead>' +
' <tbody>' +
' <p ng-repeat="record in activities" record="record">Order activity {{record.action}} (This is where I want to call a nested directive)</p>' +
'' +
' </tbody>' +
' </table>' +
'</div>',
};
}]);
And the HTML,
<order-activity activities="order.activities"></order-activity>
The result is, the p tag with the ng-repeat is appearing before the template in the orderActivity directive.
I've read stuff about using transclude, messing with replace, some people mentioned using $timeout's or $watch's to adjust the order. The latter especially seemed messy and I couldn't find a good example of it.
Essentially, what can I do to get this rendering in the proper order?
Should I build the link function to generate the template, and write in all the 'record in activities' it self and avoid the 'ng-repeat'?
Oh, this is Angular 1.2.16
Thanks.

Answer 1

(Not sure this is a great solution)
The real motivation was to call an inner directive. I had used a p tag in the question just to simplify.
In any case, I seemed to solve this by ensuring that the inner-directive was compiled before the outer directive. I did this by using $compile and $interpolate, and by creating a scope for the inner directive.
My outer directive:
angular.module('mayofest14ClientApp')
.directive('orderActivity', ['$compile', function ($compile) {
var head =
'<div class="order_activity">' +
' <table>' +
' <caption>order_id History</caption>' +
' <thead>' +
' <tr>' +
' <th>Date</th>' +
' <th>Performed By</th>' +
' <th>Action</th>' +
' <th>Comment(s)</th>' +
' </tr>' +
' </thead>' +
' <tbody>\n';
var body = '';
var foot = ' </tbody>' +
' </table>' +
'</div>';
return {
scope: {
activities: '=',
},
restrict: 'E',
link: function (scope, element, attrs) {
for (var i = 0; i<scope.activities.length; i++) {
var itemScope = scope.$new(true);
itemScope.record=scope.activities[i];
body += $compile('<order-activity-item record="record"></order-activity-item>')(itemScope).html();
}
console.log("Compiling order-activity");
element.html(
$compile(head+body+foot)(scope)
);
}
};
}]);
My inner directive:
angular.module('mayofest14ClientApp')
.directive('orderActivityItem', ['$compile', '$interpolate', function ($compile, $interpolate) {
var template = '<tr><td>{{record.date}}</td><td>{{record.performedBy}}</td><td>{{record.action}}</td><td>{{record.comment}}</td></tr>';
return {
scope: {
record: '=',
},
restrict: 'E',
replace: true,
compile: function compile(element, attributes) {
console.log('orderItem (compile)');
return {
pre: function preLink(scope, element, attributes) {
console.log('orderItem (pre-link)');
element.html($interpolate(template)(scope));
},
post: function postLink(scope, element, attributes) {
console.log('orderItem (post-link)');
}
};
},
};
}]);
So the important parts here are that:
- I'm creating a scope, and giving it the record object read by the inner directive
- In the inner directive compile function, it $interpolates the values into the html, and then compiles it
- The compiled and interpolated HTML is returned to the linking of the outer directive
- The outer directive is then built.
I have not yet checked for memory errors or anything, nor do I know yet if doing this will impact performance in a negative way.
The reason I chose outer/inner directives is that I'd like the inner directives to have actions on it (click to modify, etc..), and this is how I would lay out the objects in a proper OO design. Not sure if directives should reflect OO architecture though.
Solutions I saw elsewhere used $watch's and $ons, some even used $timeouts. The latter seems messy and unpredictable, while the former seems odd.. In any case I wasn't really able to get those working.