angularjs自定义指令不能与ng-bind-html指令一起使用
Angularjs-read more custom directive not work with ng-bind-html directive
这些是我的自定义指令read more和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
,那么readmore工作正常,但ng-bind-html
指令readmore指令不工作。
您的指令的逻辑有点不清楚作为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>';
通过这个假模板你的指令工作正常
在线执行显示问题在'partials/common/read-more.html'模板或数据中。content范围变量。您可以在这些地方查找错误。
相关文章:
- 如何使Angular JS控制器与指令一起工作
- 错误:与指令一起使用的表达式“未定义”不可赋值
- ng-select 选项在与自定义指令一起使用时加倍
- 如何将动态html与注入角度引导popover的指令一起使用
- 如何在 AngularJS 中将自定义指令与外部 HTML 模板捆绑在一起
- replace:true 如何与元素指令一起使用
- ngHide 指令仅在页面刷新后与 ngRoute 模块一起使用
- 如何将旭日图转换为指令以与 angularjs 一起使用
- 将ng repeat与指令一起使用会导致子指令不更新
- AngularJS指令包装器与Kendo一起泄漏内存
- 如何以嵌套方式将预定义指令(ng-click)与自定义指令一起使用
- 将angularjs ng repeat指令与$scope一起使用$broadcast()/$scope$on()
- 将d3与自定义的angular指令集成在一起
- Angular指令不能与select一起工作
- Angular自定义指令不能与外部javascript插件一起工作
- 在angular.js中,检测$last的指令不能与ng-if一起工作
- 将控制器和指令的交互方式捆绑在一起
- 将两个指令组合在一起
- 将工厂中的所有ngdialog组合在一起,并从指令中调用它们
- angularjs自定义指令不能与ng-bind-html指令一起使用