给定以下用于创建“对话框”元素(即模态)的服务：
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,因此该指令负责将新控制器和模板链接在一起.如果我以错误的方式解决这个问题,我对建设性的想法完全开放.
你当然可以！在这里你去：
app.factory('modalService',function ($document,$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,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,modals.length > 0 ? modals[modals.length - 1] : null);
}
};
return service;
});
一些说明：
>您需要在DOM中的某处插入模式,这就是注入$document的原因.>是的,您可以从这里取出模态标记.>记得为对话框创建新的范围并销毁它们($rootScope.$new).>这是一个WIP,我希望它足够清楚.