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

Question

我想从以下方面抽象出 ng-bind-html 行为:

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

并将其移动到我的自定义指令中，该指令采用我的字符串输入并将 HTML 标签包裹在电话号码周围，以便在移动设备上可以点击它。

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

这样任何使用我的属性指令 ng-phone-caller 的人都不需要实例化 ng-bind-html。关于我将如何实现这一目标的任何建议？我尝试使用 $sce，但这是否仍然需要我使用 ng-bind-html？例如，如果我没有将 ng-bind-html 与 $sce 一起使用，我最终会得到一条格式不正确的消息，即)“我们目前不可用。

Answer 1

您是否考虑过为此使用过滤器？使用 $sce.trustAsHtml 将允许您像 ng-bind-html 一样使用 HTML。

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

您可以将此过滤器用作:

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

更新

如果你真的不想在客户端代码中使用ng-bind-html，你可以给你的指令一个简单的模板并在指令 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>'
  };
});

您的客户端代码将如下所示:

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

由于这是在每个摘要周期中计算它，您可能希望缓存它或在 Controller 中设置您自己的 $watch 以将其作为普通 $scope 属性(不是功能性属性)绑定(bind)到它调用)。