AngularJS - 尽管是一个字符串,但过滤器需要字符串

时间:2015-12-06 03:57:40

标签: javascript angularjs

我收到以下错误:Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html这个简单的代码尽管typeof()说它是一个字符串......

var app = angular.module('app', ['angular.filter', 'ngSanitize']);

app.controller('MainCtrl', ['$scope', '$filter', function($scope, $filter) {

  $scope.filters = {};

  this.people = [{
    name: 'Yasuhito Endo'
  }, {
    name: 'Dejan Damjanović'
  }, {
    name: 'Gao Lin'
  }, {
    name: 'Mohammed Noor'
  }];

  this.applyFilter = function() {
    console.log('Making first names bold...');
    this.people = $filter('nameBold')(this.people);
  }

}]);

app.filter('nameBold', function($sce) {
  return function(items) {
    var filtered = [];
    angular.forEach(items, function(item) {
      var splitIt = item.name.split(" ");
      item.name = '<strong>' + splitIt[0] + '</strong> ' + splitIt[1];
      console.log('Trusting...  ' + typeof(item.name));
      // Trusting... string (4x) |
      // OUTPUT ------------------
      // It outputs as a string yet it gives me the error:
      // Error: [$sce:itype] Attempted to trust a non-string value 
      // in a content requiring a string: Context: html
      // --------------------------------
      // https://docs.angularjs.org/error/$sce/itype?p0=html
      filtered.push(item.name);
    });

    return $sce.trustAsHtml(filtered);
  };
});
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script data-require="angular-filter@*" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
    <script data-require="lodash.js@*" data-semver="3.10.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as viewmodel">
    <button ng-click="viewmodel.applyFilter()">Apply the Filter</button>
    
    <div ng-repeat="person in viewmodel.people">
      Person: <span ng-bind-html="person.name"></span>
    </div>
  </body>
</html>

Plunker片段: http://plnkr.co/edit/rIlETpJ3GeW0YYqrc8NB?p=preview

从代码中可以看出,它看起来非常简单,但返回的项目是一个字符串,但它给了我那么大的,令人讨厌的错误。

我该如何解决这个问题?

感谢。

1 个答案:

答案 0 :(得分:-1)

我明白了。只需将您放置的变量(From对象)并将其作为新变量放入字符串。

app.filter('nameBold', function($sce) {
    return function(items) {
        var filtered = [];
        var itemName = "";
        angular.forEach(items, function(item) {
            var splitIt = item.name.split(" ");
            item.name = '<strong>'+splitIt[0]+'</strong>';
            itemName = item.name;
            filtered.push(item.name);
        });

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