AngularJS: change part of html in template (for directive)

Question

I copied this somewhere:

angular.module('app')
  .directive('ffInclude', ['$http', '$templateCache', '$compile' ,function($http, $templateCache, $compile) {
    return function(scope, element, attrs) {
      var templatePath = attrs.ffInclude;
      $http.get(templatePath, { cache: $templateCache }).success(function(response) {
        var contents = element.html(response).contents();
        $compile(contents)(scope);
      });
    };
  }]);

The point of this directive is work like ng-include but without creating a new scope.

It can be used like this:

<div ff-include="my-template.html"></div>

My question is as follows: I would like to use this also for a general template, and in this template I would like to switch out something (an attribute of a html-element).

So if I have this html:

<div ff-include="my-general-template.html" new-attribute-value="false"></div>

And the template could look like this:

<div ng-show="true">Here is some general content</div>

In the directive I should get the attribute like this:

var newAttributeValue = attrs.newAttributeValue;

But how to swap this with new attribute with whatever value is in the ng-show attribute in the template?

Edit: I made a plunk...

Oh, @NoypiGilas, completely forgot one thing, this creates a new scope, and the entire reason for the directive was to keep the original scope. Is there a way to do this without creating a new scope? — EricC
– EricC, Commented Sep 10, 2014 at 13:56
@NoypiGilas, I was doing many things too quickly yesterday... — EricC
– EricC, Commented Sep 11, 2014 at 6:56

noypi · Accepted Answer · 2014-09-11 07:07:39Z

1

I like how this idea of doing general templating... =)

The solution below will not isolate the scope. http://plnkr.co/edit/jFj8MHZ9Kalrk4qO35IX?p=preview

  return function(scope, element, attrs) {
    scope.newAttributeValue = attrs.newAttributeValue;
    console.log("new=", scope.newAttributeValue);

at the general template:

 <div ng-show="newAttributeValue">

answered Sep 11, 2014 at 7:07

noypi

99110 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EricC Over a year ago

This is perfect, @NoypiGilas, it was really simple! Thanks a lot :)

noypi Over a year ago

glad to have help. =)

Collectives™ on Stack Overflow

AngularJS: change part of html in template (for directive)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related