javascript - Angularjs 页面跳转后报错

问题描述

问 题

报错内容：

TypeError: Cannot read property 'replace' of undefined
TypeError: Cannot read property 'indexOf' of undefined

跳转前页面代码：

<p ng-bind-html="item.text | linkformat"></p>

跳转前页面controller相关代码：

$scope.linkToDetail=function(msgId) {
        $state.go('detail',{'msgId':msgId});    
    };

详情页html：

<ion-view view-title="消息详情">
    <ion-content>
    <div class="list">
        <div class="item item-avatar">
          <img ng-src="{{msgdata.user.profile_image_url}}">
          <div class="row">
            <h2 class="col balanced col-75 ">
              <a href="#/tab/user">{{msgdata.user.name}}</a>
            </h2>
            <span id="createtime" class="col col-25  stable">
              {{msgdata.created_at|formattime}}
            </span>
          </div>
          <p ng-bind-html="msgdata.text | linkformat"></p>
          <p ng-if=msgdata.photo.thumburl ng-click="viewImg('{{msgdata.photo.largeurl}}')"><img ng-src="{{msgdata.photo.imageurl}}"></p>
          <div class="row">
            <span class="source col col-40" >{{msgdata.source|formatsource}}</span>
            <span class="icon ion-ios-chatbubble-outline col col-offset-50 col-10" ng-click="openPopover($event)"></span>
          </div>
      </div>
    </div>
    </ion-content>
</ion-view>

跳转后的详情页controller：

.controller('detailCtrl', ['$scope','roufanservice','$state','$stateParams',
    function($scope,roufanservice,$state,$stateParams){
        var msgid=$stateParams.msgId;
        var sendData={
                token:localStorage.getItem('authorize.token'),
                secret:localStorage.getItem('authorize.secret'),
                path:'statuses/show.json?format=html&id='+msgid,
                param:'{}'
            };
        var promise=roufanservice.getData(sendData,'get');
        promise.then(function(data){
            $scope.msgdata=JSON.parse(data.result);
        },
        function(err){
            roufanservice.showErrMsg(err);
        });    
}]);

详情页的url：

http://localhost:8100/#/detail?msgId=qIsnp6YWOQs

报的错中的replace来自两个filter，其他页面不报错，只要到了详情页就开始报错

.filter('linkformat',function() {
    return function(content){
        var userlink='<a href="#/tab/detail" class="former">';
        return content.replace(/<a[\s]+href=['"]([^"]*)['"][\s]+class="former">/g,userlink);
    };
})
.filter('formatsource',function(){
    return function(source){
        if(source.indexOf('href')>0){
            return angular.element(source).contents()[0].data;
        }
        else{
            return source;
        }
    };
})

网上搜了下，可能跟$locationProvider.html5Mode有关，但是看的一头雾水，请大家帮忙解答一下，谢谢！

解决方案

这个问题最方便的解决方法是在过滤器中加一层判断

.filter('linkformat',function() {
    return function(content){
    if(content){
    var userlink='<a href="#/tab/detail" class="former">';
        return content.replace(/<a[\s]+href=['"]([^"]*)['"[\s]+class="former">/g,userlink);
    }
    return '';
        
    };
})

这篇关于javascript - Angularjs 页面跳转后报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！