我正在尝试在我的应用中制作一个小模态框架..
继承人我的控制人员:
function ModalCtrl($scope){
$scope.openModal = function(name){
$scope.modalStatus = true;
}
$scope.closeModal = function(name){
$scope.modalStatus = false;
}
$scope.modal = function(){
return $scope.modalStatus;
}
$scope.modalStatus = false;
}
继续HTML:
<div ng-controller="ModalCtrl">
<div ng-show="modal()" class="modal_window">
<h2>The title</h2>
<span>The content</span>
<a ng-click="closeModal()">Close</a>
</div>
</div>
<div ng-controller="ModalCtrl">
<a ng-click="openModal('xyz')">Open it up</a>
</div>
完全不起作用..不能再混淆了
编辑:使用jsfiddle更新:http://jsfiddle.net/TeYfY/
答案 0 :(得分:3)
我没有详细检查过你的代码,但你的ngClick是在外部定义的ngController,所以它无法访问openModal
函数。您需要在控制器内部访问范围内的方法,例如:
<div ng-controller="ModalCtrl">
<div ng-show="modal()" class="modal_window">
<h2>The title</h2>
<span>The content</span>
<a ng-click="closeModal()">Close</a>
</div>
<a ng-click="openModal('xyz')">Open it up</a>
</div>
如果有更多问题,请随时发布一个Plunker或jsFiddle,并更新您的问题我很乐意仔细查看并修改我的答案。
PS:此代码属于指令。
<强>更新强>
评论中提到的OP,他想从另一个位置控制模态。这通常通过服务来实现:
module.factory( 'ModalService', function () {
var is_visible = false;
return {
isVisible: function ( value ) {
if ( angular.isDefined( value ) ) {
is_visible = value;
} else {
return is_visible;
}
}
};
});
在模态指令中,可以监听服务上的状态:
$scope.$watch( ModalService.isVisible, function ( status ) {
$scope.isVisible = status;
});
从遥远的控制器,可以改变服务的状态:
$scope.openModal = function () {
ModalService.setVisible( true );
}
这是非常人为和过度简化的,但它应该说明这一点。除了服务之外,还可以使用事件来完成组件间通信,但在大多数情况下,服务更加干净。