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吗？例如，如果我没有使用带有$ sce的ng-bind-html，我最终得到了格式不正确的消息，即＆＃34;我们＆＃8217;目前无法使用。

Answer 1

您是否考虑过使用过滤器？使用$sce.trustAsHtml将允许您使用HTML ng-bind-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，你可以给你的指令一个简单的模板并在指令控制器中创建一个函数：

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>

由于这是在每个摘要周期进行计算，因此您可能会在控制器中对其进行缓存或设置自己的$watch以将其绑定到此作为普通的$ scope属性（而不是函数调用）。 / p>

Answer 2

使用$sce：

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

您还需要添加$watch以影响任何范围更改。

有关详细信息，您可以阅读原始ngBindHtml implementation。

如何将ng-bind-html行为封装到custom指令中

2 个答案:

更新