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\$
2
  • 1
    \$\begingroup\$ Am i wrong or the third compile argument comes null? compile(tElement, tAttrs, transclude) \$\endgroup\$
    – Ismael
    Jul 19, 2013 at 14:39
  • \$\begingroup\$ You should use link here instead of compile. link gets passed the scope as the first argument. \$\endgroup\$ Apr 8, 2014 at 16:27

1 Answer 1

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\$
2
  • \$\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\$ Apr 8, 2014 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, 2014 at 5:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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