web-dev-qa-db-fra.com

Fichier HTML en tant que contenu dans Bootstrap popover dans la directive AngularJS

J'ai une directive Angular pour gérer Bootstrap popovers comme indiqué dans le code ci-dessous. Dans ma directive, je définis le contenu du popover sur une chaîne HTML, qui Je pense que c'est moche. Ce que je veux faire, c'est utiliser un fichier "template.html" au lieu de HTMLstring. De cette façon, je pourrai utiliser la même directive avec différents fichiers de modèle en fonction du type de popover que je veux afficher. mon plan de toute façon.

Alors, comment puis-je, de la meilleure façon, charger du code html à partir de mon template.html et l'utiliser à la place de la chaîne HTML dans la directive AngularJs ci-dessous?

app.directive('mypopover', function ($compile) {

var HTMLstring = "<div><label class='control-label' style='color: rgb(153, 153,153)'>Search</label>&nbsp;&nbsp;"+"<input placeholder='Search assignment' ng-model='searchText' type='text' class='form-control'> <br>"+"<label class='control-label' style='color: rgb(153, 153, 153)'>Select an assignable</label>"+"<p ng-repeat='p in projects | filter:searchText'ng-click='createEvent(user.id,date)'>"+"{{p.title}}</p></div>";

var getTemplate = function (contentType) {
    var template = '';
    switch (contentType) {
        case 'user':
            template = HTMLstring;
            break;
    }
    return template;
}
return {
    restrict: "A",
    link: function (scope, element, attrs) {
        var popOverContent;
        if (scope.user) {
            var html = getTemplate("user");
            popOverContent = $compile(html)(scope);                    
        }
        var options = {
            content: popOverContent,
            placement: "right",
            html: true,
            date: scope.date
        };
        $(element).popover(options);
    },
    scope: {
        user: '=',
        date: '='
    }
};
});
javascripthtmlangularjstwitter-bootstrappopover
27
rilar

Une solution rapide utilise templateCache avec un modèle en ligne:

Modèle en ligne:

<script type="text/ng-template" id="templateId.html">
      This is the content of the template
</script>

Js:

app.directive('mypopover', function ($compile,$templateCache) {

    var getTemplate = function (contentType) {
        var template = '';
        switch (contentType) {
            case 'user':
                template = $templateCache.get("templateId.html");
                break;
        }
        return template;
    }

DÉMO

Si vous devez charger des modèles externes, vous devez utiliser ajax $ http pour charger les modèles manuellement et les mettre dans le cache. Ensuite, vous pouvez utiliser $templateCache.get pour récupérer plus tard.

$templateCache.put('templateId.html', YouContentLoadedUsingHttp);

Exemple de code:

var getTemplate = function(contentType) {
    var def = $q.defer();

    var template = '';
    switch (contentType) {
      case 'user':
        template = $templateCache.get("templateId.html");
        if (typeof template === "undefined") {
          $http.get("templateId.html")
            .success(function(data) {
              $templateCache.put("templateId.html", data);
              def.resolve(data);
            });
        } else {
           def.resolve(template);
        }
        break;
    }
    return def.promise;
  }

DÉMO

20
Khanh TO

Pour compléter la réponse de Khahn, si vous chargez un modèle dynamique, la dernière partie devrait ressembler à ceci:

return {
restrict: "A",
scope: {
    item: "=" // what needs to be passed to the template
},
link: function(scope, element, attrs) {

  getTemplate("user").then(function(popOverContent) {

    var options = {
      content: $compile($(popOverContent))(scope),
      placement: "bottom",
      html: true,
      trigger: "hover"
    };
    $(element).popover(options);

  });
}

};

4
Kourkis