javascript - 如何从 Angular.js 中的链接函数更改模板

Question

我已经创建了指令 widget(它的行为类似于 ng-view 但模板的名称取自属性)

app.directive('widget', function() {
    return {
        restrict: 'EA',
        scope: true,
        templateUrl: function(tElement, tAttrs) {
            var page = tAttrs.name + ".html";
            return window.location.href.replace(/[^\/]+$/, '') + page;
        }
    };
});

当我像这样创建小部件时它会起作用:

<widget name="page"/>

它显示 page.html。但不会使用此代码(我知道它会在我完成输入时返回 404，但这只是一个示例)

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

为了拥有这个动态小部件，我需要使用链接功能创建模板，我该怎么做？我只知道我需要使用 {name: '@name'} 创建范围以将其与属性名称绑定(bind)，并且我可以在链接函数中使用 $http 但不知道什么时候做什么我从中得到了页面。

Answer 1

如果你想拥有动态的templateUrl，你可以简单地使用ngInclude，将它绑定(bind)到widgetName。事实上:

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

这显然意味着 widgetName 必须包含整个路径。然后你可以将它包装在一个指令中，这样你也可以做更复杂的事情，比如将“.html”添加到小部件名称并在 widgetName 上使用 $scope.$watch 来检查更改:

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>'
    };
});

HTML 将是这样的:

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