CODEWITHSUNDEEP
angularjs
Peter Ehrlich
Peter Ehrlich

Reputation: 7135

Angular linky without sanitize (filter)

New to angular. I'm using the linky filter to add href links to some already-sanitized text, with line breaks in it.

http://docs-angularjs-org-dev.appspot.com/api/ngSanitize.filter:linky angularjs newline filter with no other html

<section class="description"
       ng-bind-html-unsafe="piano.description | noHTML | newlines | linky ">
</section>

However, linky automatically sanitizes the html, removing my carefully added newlines. There doesn't seem to be an accepted way of doing this, what would work well? Make a filter to unescape my linebreaks? Customize linky to add a no filter option?

Upvotes: 2

Views: 3867

Answers (3)

Peter Ehrlich
Peter Ehrlich

Reputation: 7135

I ended up creating the following directive in a similar circumstance. It does two things:

  1. No HTML Sanitization
  2. The markup is compiled in the current scope.

Usage:

<tr ng-repeat="row in newItemHTMLs" replace-with-html="row"></tr>

Source:

myApp.directive('replaceWithHtml', ['$parse', '$compile', function($parse, $compile) {
    return {
      restrict: 'A',
      compile: function(tElement, tAttrs) {
        var ngBindHtmlGetter, ngBindHtmlWatch;

        ngBindHtmlGetter = $parse(tAttrs.replaceWithHtml);
        ngBindHtmlWatch = $parse(tAttrs.replaceWithHtml, function(value) {
          return (value || '').toString();
        });
        $compile.$$addBindingClass(tElement);

        return function(scope, element, attr) {

          $compile.$$addBindingInfo(element, attr.replaceWithHtml);

          return scope.$watch(ngBindHtmlWatch, function() {
            return element.replaceWith($compile(ngBindHtmlGetter(scope))(scope) || '');
          });

        };

      }
    };
  }
]);

Upvotes: 0

Neal
Neal

Reputation: 4568

You answered your own question in the title. Use angular's linky without the sanitize. I just went into Angular's source, copy-pasted angular's linky function without the sanitization, and renamed it.

Full code here:

Angularjs directive to replace text

Upvotes: 0

Miemo Penttinen
Miemo Penttinen

Reputation: 11

I ran into this exact same issue myself today - solved it eventually by replacing Angular's internal linky-filter with parseUrlFilter from here: https://stackoverflow.com/a/14693341/2199358

Upvotes: 1

Related Questions