我可以直接在templateUrl上使用Angular服務中的$ compile，而不使用原始HTML或原始angular.element？

給定以下服務，是爲了創建一個「對話」的元素（即，模態）：

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

    } 
]);

其可在控制器中利用像這樣：

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

有一種方法我可以使用$compile或其他任何在我的服務中沒有HTML的東西？我真的更喜歡只調用一個指令，以便運行createDialog()立即向我的DOM注入一個指令，因此指令負責將一個新的控制器和模板鏈接在一起。如果我以這種錯誤的方式去做，我完全接受建設性的想法。

來源

2014-09-29 Charlie S

我只是做了在這裏的http前面NG-包括： //stackoverflow.com/questions/25043436/angularjs-controller-in-partialview-not-working/25043850#25043850 – coma 2014-09-29 22:13:51

感謝您的鏈接。我不確定我是否遵循與上面所述相比的答案。就其核心而言，我也試圖嘗試在這樣的服務中沒有鬆散的HTML。 – 2014-09-29 22:16:24

哪些HTML？一個內聯？，只需將其作爲模板從url中獲取，是嗎？ – coma 2014-09-29 22:21:07

當然你也可以！，在這裏你去：

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

一些注意事項：

你需要在某處DOM插入模式，這就是爲什麼$文件注入。
是的，你可以從這裏取出模態標記。
記得爲對話框創建新的作用域並銷燬它們（$ rootScope。$ new）。
這是一個WIP，我希望它很清楚。

來源

2014-09-29 22:33:31 coma

你可以如下試試這個，只是爲了使你打開對話框

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

從控制器寫入如下

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

來源

2016-06-27 11:59:06 Ram

我可以直接在templateUrl上使用Angular服務中的$ compile，而不使用原始HTML或原始angular.element？

回答

相關問題