0

我正在尝试在我的应用程序中制作一个小模态框架..

这是我的控制器：

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/

4

1 回答 1

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

在 modal 指令中，可以监听服务的状态：

$scope.$watch( ModalService.isVisible, function ( status ) {
  $scope.isVisible = status;
});

从一个遥远的控制器，可以改变服务的状态：

$scope.openModal = function () {
  ModalService.setVisible( true );
}

这是高度做作和过度简化的，但它应该说明这一点。除了服务之外，还可以使用事件来完成组件间的通信，但大多数情况下服务更干净。

于 2013-01-21T06:53:37.587 回答