emanuel.directive(‘hymn’, function() { return { restrict: ‘E’, link: function(scope, element, attrs) { // some ode }, templateUrl: function(elem,attrs) { return attrs.templateUrl || ‘some/path/default.html’ } } }); So you can provide templateUrl via markup <hymn template-url=”contentUrl”><hymn> Now you just take a care that property contentUrl populates with dynamically generated path.
From AngularJS Documentation on Directives: transclude – compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but … Read more
Consider a directive called myDirective in an element, and that element is enclosing some other content, let’s say: <div my-directive> <button>some button</button> <a href=”#”>and a link</a> </div> If myDirective is using a template, you’ll see that the content of <div my-directive> will be replaced by your directive template. So having: app.directive(‘myDirective’, function(){ return{ template: ‘<div … Read more
In cases where you have multiple directives on a single DOM element and where the order in which they’re applied matters, you can use the priority property to order their application. Higher numbers run first. The default priority is 0 if you don’t specify one. EDIT: after the discussion, here’s the complete working solution. The … Read more
You need $event.currentTarget instead of $event.target.
After my initial struggle with the link and controller functions and reading quite a lot about them, I think now I have the answer. First lets understand, How do angular directives work in a nutshell: We begin with a template (as a string or loaded to a string) var templateString = ‘<div my-directive>{{5 + 10}}</div>’; … Read more
You have a lot of pointless jQuery in there, but the $compile service is actually super simple in this case: .directive( ‘test’, function ( $compile ) { return { restrict: ‘E’, scope: { text: ‘@’ }, template: ‘<p ng-click=”add()”>{{text}}</p>’, controller: function ( $scope, $element ) { $scope.add = function () { var el = $compile( … Read more
I suspect looking at the excerpt that the function trustSrc from trustSrc(currentProject.url) is not defined in the controller. You need to inject the $sce service in the controller and trustAsResourceUrl the url there. In the controller: function AppCtrl($scope, $sce) { // … $scope.setProject = function (id) { $scope.currentProject = $scope.projects[id]; $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url); } } … Read more
What a great question! I’d love to hear what others have to say, but here are the guidelines I use. The high-altitude premise: scope is used as the “glue” that we use to communicate between the parent controller, the directive, and the directive template. Parent Scope: scope: false, so no new scope at all I … Read more
Transclude is a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere(Where actually the ng-transclude is at) in the directive’s template. Read more about this under Creating a Directive that Wraps Other Elements section on documentation of directives. If you write a custom directive … Read more