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。