javascript - 将类添加到trustedValue AngularJS

Question

我有以下html：

<li class="editor" ng-model="post.text" ng-bind-html="post.text" add-class="post.text"></li>

其中 post.text 是一个包装的trustedValue，如下所示：

我打开它后，它看起来像这样：

现在，我想创建一个指令，搜索该trustedValue，并将一个类添加到img 标签。到目前为止，我有这个：

function AddClassToImg($sce) {
    return {
        restrict: 'A',
        scope: {
            addClass: '='
        },
        link: function (scope, elem, attrs) {
            var content = scope.addClass.$$unwrapTrustedValue();
            $(content).find('img').addClass('test');
        }
    }
};

angular.module('UserProfile')
    .directive('addClass', ['$sce', AddClassToImg]);

我怎样才能从 html 中获取 post.text，双向绑定到它，并将该类添加到 post.text 中的所有图像？

Answer 1

我只是在复制您的代码并添加逻辑进行编译。它们可能是您可能需要做的轻微修改：

function AddClassToImg($sce,$compile) {
    return {
        restrict: 'A',
        scope: {
            addClass: '='
        },
        link: function (scope, elem, attrs) {
            var content = scope.addClass.$$unwrapTrustedValue();
            var imgElement = angular.element(content.querySelector('img'));
            imgElement.addClass('test');
            $compile(content)(scope);
        }
    }
};

angular.module('UserProfile')
    .directive('addClass', ['$sce', AddClassToImg]);

Answer 2

我解决了它，对于想知道同样事情的每个人，这里是代码：

function AddClassToImg($sce, $compile){
    return {
        restrict: 'A',
        scope:{
            addClass: '='
        },
        link: function (scope, elem, attrs){

            var content = scope.addClass.$$unwrapTrustedValue();
            var newContent = $("<div>").append($(content).find('img').addClass('col-md-12 col-xs-12').end()).html();
            scope.addClass = $sce.trustAsHtml(newContent);
        }
    }
};