AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

.controller('HomeController', function($scope,$location) {
    $scope.userName='天下大势，为我所控！';
    $scope.clkUrl=function(){
        $scope.pageUrl='norout1.html';//更改值
    }
    $scope.clk2=function(){
       alert($scope.userName);
        $scope.userName='司马懿'
    }
}).directive('bhtml',function(){

    return {
        templateUrl:'norout1.html',
        restrict:'E',replace:true

    }
})

<div ng-controller="HomeController as homeP"> <p>下面是指令载入文件：<bhtml></bhtml></p> </div>  norout1.html: <p> <pre> 这里是：没有使用路由载入 <button ng-click="clk2()" >看是否能访问到数据</button> <input type="text" ng-model="userName"/> </pre> </p>

replace:true导致AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template
删除或设置为false。