I am currently working on a directive that functions well, but I had to resort to using inline template code in order to delay rendering until the click event occurs. However, I believe it would be more streamlined if I could assign the directive template and postpone rendering until after the event has fired.
Is there a way to achieve this?
(function() {
app.directive("nodeTabset", function($compile) {
return {
restrict: "A",
scope: '&',
controller: [
'$scope', '$element', '$attrs', '$compile', function($scope, $element, $attrs, $compile) {
var TABS;
// Custom template
TABS = "<div id='node-tabset-wrapper'>\n <div id='node-tabset'>\n <div>Set Attribute</div>\n <div ng-show='node.name == \"a\"'>Set Scrape Job</div>\n </div>\n <div id='node-tabset-corner'></div>\n</div>";
$scope.selectNode = function(node) {
node.addClass("selected");
node.prepend(TABS);
$compile(node.children()[0])($scope);
return $scope.$apply();
};
return $scope.evaluateSelection = function($event) {
var parent,
parent = angular.element($event.currentTarget).parent();
// do some stuff
return $scope.selectNode(parent);
};
}
],
link: function(scope, element, attrs, controller) {
return element.bind('click', scope.evaluateSelection);
}
};
});
}).call(this);