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'}创建范围以将其与属性名称绑定，并且我可以在链接函数中使用$ http但不知道当我从中获取页面时该怎么做。

Answer 1

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

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

这显然意味着widgetName必须包含整个路径。然后，您可以将其包装在指令中，这样您也可以执行更复杂的操作，例如将“.html”添加到窗口小部件名称并使用$ scope。$ watch on widgetName来检查更改：

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"/>

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

1 个答案: