Angularjs-read more custom directive does not work with ng-bind-html directive

Question

This is my custom directive for reading more and to_trusted (for converting to 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);
        };
    }]);

call in 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>

If iI removes ng-bind-htmlthen reading more works fine, but the readmoreng-bind-html directive does not work.

Answer 1

the logic of your directive is a bit obscure as the Read-More directive , especially the use of templateUrl in your directive, the hmfulltext parameter and ng-bind-html .

I used your fake pattern directive in your directive:

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

:

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

, partials/common/read-more.html, data.content. .