CODEWITHSUNDEEP
angularjsangularjs-directive
Peter Short
Peter Short

Reputation: 772

Getting the children of an element with an attribute directive

I have a directive that is restricted to attribute. I want to do either of 2 things. If a certain condition is met, I want to use the children for the element with the directive attribute as the model (thats the content) or if that condition is not met then I want to data bind from a service instead, so the directive would replace the children with something i was given. I have a directive that is doing the latter but Im finding it very hard to have it grab the children before the compiler comes in and replaces it with its template... Anyone know how this is done if its possible?

Upvotes: 1

Views: 582

Answers (1)

MikeJ
MikeJ

Reputation: 2324

I think what you're looking for is element.context in your directive's link (or compile) function.

Inside your link function (pre or post), the original element that your directive was found on is stored in the passed-in element's context property. So if your service call returns no data, you can just replace the compiled element with the original element by doing element.replaceWith(element.context).

So your directive would look something like this:

.directive('ttContent', ['mySvc', function (mySvc) {

  return {
    restrict: 'A',
    replace: true,
    transclude: false,
    template: '<div class="content new-content" ng-bind-html="htmlContent | sanitize"></div>',
    scope: {
      testDataReturned: '@'
    },
    link: {
      pre: function (scope, element, attrs) {
      },
      post: function (scope, element, attrs){
        mySvc.fetchContent().then(function success(data){
            if (data) {
              scope.htmlContent = data;
            } else {
              // element.context is our original, pre-compiled element
              element.replaceWith(element.context);
            }
          }, function fail(data){
            element.replaceWith(element.context);
        });
      }
    }
  };
}]);

Here's a plunk.

Upvotes: 2

Related Questions