AngularJS dynamically load content in directives - angularjs

Question

I am building an AngularJS application where I want to dynamically load different html templates based on where it was called from. I am new to AngularJS, so I may well be wide of the mark with this approach.
html
<div ng-controller="ProjectsCtrl" ng-init="getProjects()">
<div ng-repeat="project in projects>
<button ng-click="">Create New Project</button>
<button ng-click="">Cancel</button>
<div ng-repeat="task in projects.tasks>
<button ng-click="">Create New Task</button>
<button ng-click="">Cancel</button>
</div>
</div>
</div>
<focus-pane></focus-pane>
app.js
var projectsApp = angular.module('projectsApp', []);
projectsApp.directive('focusPane', function() {
return {
restrict: 'E',
// this template loading should be dynamic
templateUrl: '_create_project.html'
};
});
concernsApp.controller('ProjectsCtrl', function ($scope, $http, ) {
...
});
So, what I want to do is be able to two things when the 'Create New Project' button is clicked:
pass in the project or task object and use this in the focusPane directive.
pass in a name of a template to load dynamically in the directive.
I'm thinking, in pseudo-code, the html should look something like this:
html
<div ng-controller="ProjectsCtrl" ng-init="getProjects()">
<div ng-repeat="project in projects>
<button ng-click="createProject(project, '_create_project.html')">Create New Project</button>
<button ng-click="">Cancel</button>
<div ng-repeat="task in projects.tasks>
<button ng-click="createProject(task, '_create_task.html')">Create New Task</button>
<button ng-click="">Cancel</button>
</div>
</div>
</div>
<focus-pane></focus-pane>
..and then I would declare these functions in the ProjectsCtrl. However, as I said, I'm just getting into AngularJS and I'm not sure this is the right path at all. In the AngularJS Docs I couldn't find much info on dynamically loading things in a directive.

Answer 1

Yes the comments made earlier are correct (depending upon what context your working in), but it is still possible none the less to create a directive that will load dynamic templates for you. Here is an example. http://jsfiddle.net/joshkurz/T42xQ/5/
.directive('dynamicTemplate', ['$compile', '$templateCache', function($compile, $templateCache){
return {
scope: { templateVar: '#'},
link: function(scope, element, attrs){
scope.test = 'Hello World';
scope.$watch('templateVar', function(newV,oldV){
if(newV !== undefined){
var newElement = $compile($templateCache.get(newV).trim())(scope);
element.html('');
element.append(newElement[0]);
}
});
}
}
}]);
I find sometimes when creating directives they can actually have requirements to control what data is requested. After all that is what ngView does right? its a directive too. You just have to make sure that that you have all the data before any DOM manipulation starts.