给定以下旨在创建“对话框”元素(即模式)的服务:
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, $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 中的某个位置,这就是注入 $document 的原因。
- 是的,您可以将模态标记从这里取出。
- 请记住为对话框创建新范围并销毁它们($rootScope.$new)。
- 这是一个 WIP,我希望它足够清楚。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)