如何将ng-bind-html行为封装到自定义指令中

Question

I would like to abstract away ng-bind-html behavior from:

<div ng-repeat="message in messages >
        <p ng-bind-html=message.title ng-phone-caller="message.title"> </p> 
    </div>

and move it into my custom directive which takes my string input and will wrap HTML tags around the phone numbers so that it's clickable on mobile.

    .directive('ngPhoneCaller',function() {
        return {
            scope: {
                ngPhoneCaller: '='
            },
            link: function (scope) {
var stringWithHtmlWrapper = $sce.getTrustedHtml(wrapStringWithPhoneNumberHTMLTag(scope.ngPhoneCaller));
                scope.ngPhoneCaller = $sce.trustAsHtml(stringWithHtmlWrapper);
            }
            }
        }
        });

so that anyone who uses my attribute directive ng-phone-caller doesn't need to also instantiate ng-bind-html. Any suggestions as to how I would achieve this? I tried utilizing $sce, but doesn't that still require me to use ng-bind-html? For example, if I didn't use ng-bind-html with $sce, I ended up with an improperly formatted message ie) "We&# 8217;re currently unavailable.

Answer 1

Have you considered using a filter for this? Using $sce.trustAsHtml will allow your use of HTML as ng-bind-html does.

.filter('phoneCaller', function($sce) {
    return function(value) {
        return $sce.trustAsHtml(wrapStringWithPhoneNumberHTMLTag(value));
    };
});

You would use this filter as:

<div ng-repeat="message in messages >
    <p ng-bind="message.title | phoneCaller"></p>
    <!-- Or alternately -->
    <p>{{ message.title | phoneCaller }}</p>
</div>

Update

If you really don't want to use ng-bind-html in the client code, you can give your directive a simple template and create a function in a directive controller:

angular.module('myapp').directive('ngPhoneCaller', function($sce) {
  return {
    restrict: 'A',
    scope: {
      ngPhoneCaller: '='
    },
    controller: function($scope) {
      $scope.wrappedPhoneCaller = function() {
        return $sce.trustAsHtml(wrapStringWithPhoneNumberHTMLTag($scope.ngPhoneCaller));
      }
    },
    template: '<p ng-bind-html="wrappedPhoneCaller()"></p>'
  };
});

Your client code would then look like:

<div ng-repeat="message in messages >
  <div ng-phone-caller="message.title"></div>
</div>

Since this is calculating it on every digest cycle, you might look to cache it or set up your own $watch in the controller to bind to this as a normal $scope property (not a functional call).

Answer 2

Use $sce :

.directive('ngPhoneCaller',function($sce) {
    return {
        scope: {
            ngPhoneCaller: '='
        },
        link: function (scope, element) {
            var html = wrapStringWithPhoneNumberHTMLTag(scope.ngPhoneCaller);
            element.html($sce.getTrustedHtml(html) || '');
        }
    }
    });

---

You also need to add $watch to affect any scope changes.

For more info about, you can read original ngBindHtml implementation .