Comment faire pour modifier le modèle de fonction de lien dans Angular.js

Question

J'ai créé la directive widget (qui agissent comme des ng-view, mais le nom du modèle est prise à partir de l'attribut)

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

il fonctionne quand je créer un widget comme ceci:

<widget name="page"/>

Afficher page.html.Mais pas avec ce code (je sais qu'il sera de retour 404 lors de la saisie jusqu'à ce que j'ai fini, mais c'est juste un exemple)

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

Afin d'avoir cette dynamique widget, j'ai besoin de créer un modèle utilisant la fonction de lien, comment puis-je faire cela?Je sais seulement que j'ai besoin de créer portée à l'aide d' {name: '@name'} pour le lier avec le nom de l'attribut, et que je peux utiliser $http en fonction de lien mais ne savent pas quoi faire quand j'ai eu la page à partir d'elle.

Answer 1

Si vous voulez avoir une dynamique templateUrl vous pouvez simplement utiliser ngInclude, de la lier à widgetName.En fait:

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

De toute évidence, cela signifie que widgetName doit contenir le chemin d'accès complet.Vous pouvez ensuite l'envelopper dans une directive, de sorte que vous pouvez aussi faire des choses plus complexes, comme l'ajout d' '.code html " pour le nom du widget et utiliser $scope.$regarder sur widgetName pour vérifier les changements:

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

et le code HTML sera comme:

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