4
\$\begingroup\$

I would like to hear the opinion of more experienced AngularJS developers on whether the following directive is best practice...

I was trying to make to make a directive that will include HTML that:

  • Can include compiled elements (other directives, like ng-src in the example below)
  • Interpolated values ({{ value }})
  • Can include values/functions from the parent scope without modifying it (i.e. the directive has isolated scope)

Example usage:

<div ng-controller="Ctrl">
<tag>
    <h1><a href="{{ url }}">{{ url }}</a></h1>
    <img ng-src="{{ image }}" />
</tag>
</div>

Controller and directive implementation:

var testapp = angular.module('testapp', []);

var Ctrl = function($scope) {
    $scope.url = "http://google.com";
    $scope.image = "https://www.google.gr/images/srpr/logo4w.png";
};

testapp.directive('tag', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: { },
    compile: function compile(tElement, tAttrs, transclude) {
        return function(scope) {
            transclude(scope.$parent, function(clone) {
                tElement.append(clone);
            });
        }
    }
  }
});

Fiddle: http://jsfiddle.net/x5WcB/3/

\$\endgroup\$
  • 1
    \$\begingroup\$ Am i wrong or the third compile argument comes null? compile(tElement, tAttrs, transclude) \$\endgroup\$ – Ismael Jul 19 '13 at 14:39
  • \$\begingroup\$ You should use link here instead of compile. link gets passed the scope as the first argument. \$\endgroup\$ – Asad Saeeduddin Apr 8 '14 at 16:27
2
\$\begingroup\$

I am a bit confused, your directive basically would do what Angular already does?

When I comment out the entire testapp.directive('tag', function() { block, I see no change in the functionality of this code in fiddle.. I think you need a more extensive example for us to provide a meaningful review.

Other than that:

  • Your code looks fine to me
  • JsHint.com cannot find anything wrong besides some missing semicolons
  • You have 0 comments in your code
\$\endgroup\$
  • \$\begingroup\$ In this specific case there is no benefit, but a directive will often process information into a particular object and include extra methods. Eg. I could create a tag object within the directive and expose this as part of the isolated scope. The tag object might have useful methods such as delete, which removes the entire node. You could then add a button inside the tag node which invokes tag.delete(). Whether you use a link or a button or whatever to invoke it is left up to the html that consumes the directive, and isn't predetermined by the directive. \$\endgroup\$ – Asad Saeeduddin Apr 8 '14 at 16:21
  • \$\begingroup\$ I honestly can't remember what I was thinking when I posted the question but I would like to believe that there was a reason why I wanted to do this manually and was just setting up a test case for it :) \$\endgroup\$ – georgiosd Jun 25 '14 at 5:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.