无法使用 angular 过滤器操作字符串

Question

我是一名 angular 新手，我研究了这本书 "Angular JS by example" 并尝试创建自己的过滤器。（第 93-94 页）。

在我的控制器中，这是我要操作的字符串 procedure: "Assume a position, with feet together .\Slightly bend your knees, .\While in air, bring your legs out .\ As you are moving your legs outward"

然后我对其进行消毒

$scope.trustedHtml = $sce.trustAsHtml($scope.currentExercise.details.procedure);

由于这是一个 SPA ，过滤器在 description-panel.ejs 文件中，即在 workout.ejs 内，即在 index.ejs

内

description-panel.ejs 有

<div class="panel-body" ng-bind-html ="trustedHtml | myLineBreakFilter"> </div>

workout.ejs 有

<div id="video-panel" class="col-sm-3" ng-include="'description-panel.ejs'">

并且index.ejs有

<script src="/javascripts/7MinWorkout/filters.js"></script>

filter.js 有过滤器

angular.module('7minWorkout').filter('myLineBreakFilter', function () {
    return function (input) {
        var str = input;
        var br = "</br></br>";
        var position = str.indexOf(".");

        var output = [str.slice(0, position), br, str.slice(position)].join('');    

        return output ; 
    }
});

过滤器应将所有 . 替换为 </br></br>。

这不起作用，我的前端根本看不到任何文本。我在控制台中收到此错误

TypeError: str.slice is not a function  at filters.js:22

像 str.slice 这样的基本 js 东西不应该开箱即用吗？我错过了什么？

谢谢

Answer 1

$sce.trustAsHtml() return 你是一个对象，所以 slice 不会作用于 it.You 可以将该对象传递给 $sce.getTrustedHtml(object) 以获得原始值，然后可以将 slice 应用于它。

    angular.module('7minWorkout').filter('myLineBreakFilter', function ($sce) {
return function (input) {

var str = $sce.getTrustedHtml(input);
var br = "</br></br>";
var position = str.indexOf(".");

var output = [str.slice(0, position), br, str.slice(position)].join('');    

return $sce.trustAsHtml(output) ; 
}
});

Answer 2

尝试在拼接之前添加这个

str.toString();
str.splice(//pass parameters);

无法使用 angular 过滤器操作字符串

cannot manipulate string with angular filter

angularjs

angularjs-filter