modèle dynamique de la directive en angularjs

J'ai besoin de décider de le modèle basé sur la date. J'ai vu un bon exemple.
Mais dans cet exemple, les modèles sont tellement simples qu'il pouvait s'en servir cordes. Dans mon cas, je veux utiliser le php pour produire les modèles, j'ai donc utilisé de cette façon:

eng.directive('vis', function ($compile) {
var getTemplate = function(ir) {
    var k = (ir.visits.last && parseInt(ir.visits.last.done))?'V':'E';
    var s = (ir.data.kind == 0)?'H':'V';
    return s+k+'T';
}

var linker = function(scope, element, attrs) {
    scope.$watch('ir',function(){
        if (!scope.ir) return;
        element.html(jQuery('#'+getTemplate(scope.ir)).html()).show();
        $compile(element.contents())(scope);
    })
}
return {
    restrict: "E",
    rep1ace: true,
    link: linker
};});

et les modèles sont:

<div id=HVT style="display:none">
    <p>horizontal view template</p>
</div>
<div id=HET style="display:none">
    <p>horizontal {{1+5}} Edit template</p>
</div>
<div id=VVT style="display:none">
    <p>vertical view template</p>
</div>
<div id=VET style="display:none">
    <p>vertical Edit template</p>
</div>

Je suis sûr qu'il ya une façon plus intelligente.
est-il préférable d'utiliser templateUrl ? quelqu'un pourrait me dire comment l'utiliser dans mon cas?

Edit: il y a un problème. le modèle ne prend pas en voir la portée

OriginalL'auteur Aladdin Mhemed | 2013-03-14

  1. 16

    Cela est également possible pour la création de modèles dynamiques dans AngularJS:
    Dans votre directive utilisation:

    template : '<div ng-include="getTemplateUrl()"></div>'

    Maintenant votre contrôleur peut décider le modèle à utiliser:

    $scope.getTemplateUrl = function() {
  return '/template/angular/search';
};

    Parce que vous avez accès à vos paramètres de portée, vous pouvez aussi faire:

    $scope.getTemplateUrl = function() {
  return '/template/angular/search/' + $scope.query;
};

    De sorte que votre serveur peut créer un modèle dynamique pour vous.

    modèle & templateUrl peut prendre une fonction comme: function(el,attrs){ return '/tmpls/' + attrs.template; }
    J'ai essayé la méthode ci-dessus, sa fonctionne très bien pour moi maintenant même j'ai le contrôle sur la navigation,le seul problème est que si je dois dynamique state (('manualTest/:nomtest', ) et je suis de retour d'état dynamique de la page, ng-init est appelé deux fois

    OriginalL'auteur Ruud

  2. 3

    J'ai trouver la solution ici

    dans cet exemple http://jsbin.com/ebuhuv/7/edit

    trouver ce code:

    app.directive("pageComponent", function($compile) {
    var template_for = function(type) {
        return type+"\\.html";
    };
    return {
        restrict: "E",
        //transclude: true,
        scope: true,
        compile: function(element, attrs) {
            return function(scope, element, attrs) {
                var tmpl = template_for(scope.component.type);
                element.html($("#"+tmpl).html()).show();
                $compile(element.contents())(scope);
            };
        }
    };});

    OriginalL'auteur Aladdin Mhemed

  3. 2

    Angulaire, vous n'avez pas besoin d'utiliser ids. Aussi, au lieu de display:none vous pouvez utiliser ng-show:

    <div ng-show="HVT">
    <p>horizontal view template</p>
</div>
<div ng-show="HET">
    <p>horizontal {{1+5}} Edit template</p>
</div>
...

    Votre $regarder de rappel (que vous pouvez définir sur un contrôleur ou dans une directive) puis il suffit de modifier la portée appropriée de la propriété:

    var getTemplate = function (ir) {
    var k = (ir.visits.last && parseInt(ir.visits.last.done)) ? 'V' : 'E';
    var s = (ir.data.kind == 0) ? 'H' : 'V';
    return s + k + 'T';
}
$scope.$watch('ir', function () {
    if (!$scope.ir) return;
    //hide all, then show the one we want
    $scope.HVT = false;
    $scope.HET = false;
    $scope.VVT = false;
    $scope.VET = false;
    $scope[getTemplate($scope.ir)] = true;
})

    Violon. Le violon a le code ci-dessus dans un contrôleur, depuis je n'ai aucune idée de l'endroit où vous pourriez être en utilisant la directive. Le violon viens aussi de code en dur "EFP", car je ne sais pas ce que ir ressemble.

    OriginalL'auteur Mark Rajcok