Angularjs-read more custom 指令不适用于 ng-bind-html 指令答案

【问题标题】：Angularjs-read more custom directive not work with ng-bind-html directiveAngularjs-read more custom 指令不适用于 ng-bind-html 指令
【发布时间】：2015-08-09 05:19:27
【问题描述】：

这些是我的自定义指令，用于阅读更多内容和 to_trusted（用于转换为 html）。

psp.directive('hmRead', function () {
    return {
        restrict:'AE',
        scope:{
            hmtext : '@',
            hmlimit : '@',
            hmfulltext:'@',
            hmMoreText:'@',
            hmLessText:'@',
            hmMoreClass:'@',
            hmLessClass:'@'
        },
        templateUrl: 'partials/common/read-more.html',
        controller : function($scope){
              $scope.toggleValue=function(){

                    if($scope.hmfulltext == true)
                        $scope.hmfulltext=false;
                    else if($scope.hmfulltext == false)
                        $scope.hmfulltext=true;
                    else
                        $scope.hmfulltext=true;
              }        
        }
    };
});

psp.filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

在 html 中调用。

 <hm-read hmtext="{{data.content}}" ng-bind-html="data.content| to_trusted" hmlimit="100" hm-more-text="read more" hm-less-text="read less"></hm-read>

如果我删除ng-bind-html 然后阅读更多工作正常但ng-bind-html 指令 readmore 指令不起作用。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

你的指令的逻辑有点不清楚，因为 Read-More 指令特别是在你的指令中使用 templateUrl，hmfulltext 参数和ng-bind-html。

顺便说一句，我在你的指令中通过假模板使用你的指令：

template: '<p>template that is set in your directive</p>',

假内容范围变量如下：

$scope.data={};
$scope.data.content = '<p>template that passed into directive</p>';

通过这个假模板，你的指令可以正常工作

Online Execution

这表明问题出在 'partials/common/read-more.html' 模板或 data.content 范围变量中。您可以在这些地方寻找错误。

【讨论】：