我是Angular的新手。不知道我在这里错过了什么以及从哪里开始寻找。
我需要在我的应用程序中重用(Twitter Bootstrap)模态对话。我看过 Angular UI,但我想自己构建它们 - 也能够理解它是如何工作的。
我有:
在我看来:
<div cng-modal title="Create new user" submit="saveNewUser()">
<div ng-include=" 'templates/newUserForm.html' "></div>
</div>
我的指令:
UserManagerApp.directive('cngModal', function () {
return {
restrict: 'A',
replace: true,
transclude: true,
scope: {
title: '@title',
submit: '&'
},
templateUrl: 'templates/modal.html',
controller: function($scope, $element, $attrs, $location) {
$scope.submitHandler = function() {
$scope.submit();
};
},
link: function (scope, element, attrs) {
console.log(element);
}
};
});
我的模态.html模板:
<div id="newUserModal" class="modal hide" data-backdrop="static" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>{{ title }}</h3>
</div>
<div class="modal-body" ng-transclude></div>
<div class="modal-footer">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-action btn-submit" ng-click="submitHandler()"><i class="icon-ok"></i> Save</button>
<button type="button" class="btn btn-action btn-cancel" data-dismiss="modal"><i class="icon-remove"></i> Cancel</button>
</div>
</div>
最后(部分)我的控制器:
UserManagerApp.controller('UserManagerCtrl', ['$scope', 'ajaxService', '$route', function($scope, ajaxService, $route) {
$scope.showNewUserModal = function () {
$('#newUserModal').modal('show');
};
$scope.saveNewUser = function () {
console.log('saving user');
};
}]);
问题
现在我打开了我的模态,因为我在模态中给了它 ID "newUserModal".html在我的控制器中 showNewUserModal() 触发器通过其 ID 准确打开该模态。
我想要一个服务,我可以从控制器中调用它,以根据我的指令构造一个新的模态并打开它。无需分配任何 ID。这怎么可能?
感谢您为我指出正确的方向。
在 ui-bootstrap 的$modal中,我们分 5 块做类似的事情(当然你的也可以很简单)。
我们有一个堆栈映射来堆叠我们的对话框(你可以有 1 个以上)。
然后我们有一个针对背景的指令和一个针对模态本身的指令。
我们有一个工厂将准备一个新的模态,即获取它的模板,解决它有的解析,如果需要创建一个控制器,一个新的范围......当它准备好时,我们使用另一个工厂(最好为每个目的建立一个工厂),它将手动创建一个新的背景和模型,如下所示:
var angularDomEl = angular.element('<div modal-window></div>');
angularDomEl.attr('window-class', modal.windowClass);
angularDomEl.attr('index', openedWindows.length() - 1);
angularDomEl.attr('animate', 'animate');
angularDomEl.html(modal.content);
var modalDomEl = $compile(angularDomEl)(modal.scope);
然后我们只需要将其附加到正文中。
因此,我们的想法是拥有一个工厂,该工厂将手动创建元素并对其进行配置,然后将其附加到正文中。
我强烈建议您更深入地阅读$modal并了解我们在那里做了什么。