Javascript 如何从Angular.js中的link函数更改模板

我已经创建了指令

小部件
（其行为类似于ng视图，但模板的名称取自属性）

当我创建如下小部件时，它会工作：

<widget name="page"/>



它显示page.html。但无法使用此代码（我知道在我完成输入之前它将返回404，但这只是一个示例）



为了拥有这个动态小部件，我需要使用link函数创建模板，我如何才能做到这一点？我只知道我需要使用
{name:'@name'}
创建作用域来将其与属性名称绑定，我可以在link函数中使用$http，但不知道当我从中获取页面时该怎么做。
如果你想拥有动态
模板URL
你可以简单地使用
ngInclude
，将其绑定到
widgetName
。
事实上：

HTML将类似于：

<input ng-model="widgetName"/>
<widget name="widgetName"/>

如果您想拥有动态
模板URL
，只需使用
ngInclude
，将其绑定到
widgetName
。
事实上：

HTML将类似于：

<input ng-model="widgetName"/>
<widget name="widgetName"/>



<div ng-include="widgetName"></div>

app.directive('widget', function() {
    return {
        restrict: 'EA',
        scope: {
            widgetName : '=name'
        },
        controller: function($scope) {
            $scope.$watch('widgetName', function() {
                $scope.templateUrl = $scope.widgetName + '.html';
            });
        },
        template: '<div ng-include="templateUrl"></div>'
    };
});

<input ng-model="widgetName"/>
<widget name="widgetName"/>