Kann ich kompilieren $ in einem Winkel Service direkt auf einem templateUrl statt auf rohen HTML oder einem rohen angular.element?

Question

den folgenden Dienst Da ein "Dialog" Element zu schaffen gemeint ist (dh ein modal):

app.service('dialog', ['$document', '$compile', '$rootScope', 
    function($document, $compile, $rootScope) { 

     var body = $document.find('body'); 
     var scope = $rootScope.$new(); 

     this.createDialog = function() { 
      var dialogElem = angular.element('<div ng-include="\'/dialog.html\'"></div>'); 
      $compile(dialogElem)(scope); 
      body.append(dialogElem); 
     }; 

    } 
]); 

die wie so in einer Steuerung eingesetzt werden kann:

$scope.someFunction = function() { 
    dialog.createDialog(); 
}; 

Gibt es eine Möglichkeit dass ich $compile oder irgendetwas anderes verwenden kann, um HTML in meinem Service nicht zu haben? Ich würde wirklich lieber nur eine Richtlinie berufen, so dass die Ausführung createDialog() unverzüglich eine Richtlinie in meinen DOM einspritzt und somit ist die Richtlinie für zuständig einen neuen Controller und Vorlage zusammen zu verbinden. Wenn ich das falsch mache, bin ich offen für konstruktive Ideen.

Answer 1

Natürlich können Sie !, hier gehen Sie:

app.factory('modalService', function ($document, $compile, $rootScope, $templateCache, $http) { 

    var body = $document.find('body'), 
     modals = []; 

    var service = { 
     show: function (template, data, modal) { 

      // The template's url 
      var url = 'template/modal/' + template + '.html'; 

      // A new scope for the modal using the passed data 
      var scope = $rootScope.$new(); 
      angular.extend(scope, data); 

      // Wrapping the template with some extra markup 
      modal = modal || angular.element('<div class="modal"/>'); 

      // The modal api 
      var api = { 
       close: function() { 

        modal.remove(); 
        scope.$destroy(); 
        modals.splice(modals.indexOf(api), 1); 

       }, 
       replace: function (template, data) { 

        return angular.extend(api, service.show(template, data, modal)); 
       } 
      }; 

      // Adding the modal to the body 
      body.append(modal); 

      // A close method 
      scope.close = api.close; 

      // Caching the template for future calls 
      $http.get(url, {cache: $templateCache}) 
       .then(function (response) { 

        // Wrapping the template with some extra markup 
        modal.html('<div class="win">' + response.data + '</div>'); 

        // The important part 
        $compile(modal)(scope); 
       }); 

      modals.push(modal); 

      return api; 
     }, 
     showOrReplaceLast: function (template, data) { 

      return service.show(template, data, modals.length > 0 ? modals[modals.length - 1] : null); 
     } 
    }; 

    return service; 
}); 

Einige Anmerkungen:

• Sie müssen die modal irgendwo in dem DOM einfügen, das ist, warum das $ Dokument injiziert wird.
• Ja, können Sie die modale Markup nehmen hier aus.
• Denken Sie daran, neue Bereiche für den Dialog zu schaffen und sie ($ rootScope. Neuer $) zu zerstören.
• Dies ist ein WIP, ich hoffe, es ist genug, um klar.

Answer 2

du wie unten versuchen könnte, nur Ihr zu machen ng-schließen, bevor Sie den Dialog

app.service('dialog', ['$http', '$compile', '$q', '$templateCache' 
    function($http, $compile, $q, $templateCache) { 

     this.compileInclude = function(scope, url) { 
      var deferred = $q.defer(); 
      $http.get(url, {cache : $templateCache}).then(function(response){ 
       deferred.resolve($compile(response.data)(scope)); 
      }); 
      return deferred.promise; 
     }; 
    } 
]); 

Vom Controller Schreib wie unten

dialog.compileInclude($scope, 'dialog.html').then(function(){ 
    // open dialog here 
});