用AngularJS呈现模态

我正在尝试学习AngularJS（BackboneJS的背景）。我有一个div，里面有一些内容，我希望在单击该div时将其作为一个模式呈现：

<div class="stickynote"> Content here </div>

这里的内容

---

我的想法是添加一个模态类，我可以在CSS中设置样式。但是，我不太确定如何在单击时添加模态类（反之，在呈现模态后单击时删除模态类）。我是否必须使用

ng单击

并以某种方式从JavaScript（myApp.js）文件中设置class属性？

如果您想使用自己的模式样式，并且如果您只想实现向元素的

class

属性添加额外项，您可以结合使用

ng class

和

ng click

：

<div class="stickynote" 
  ng-class="{yourModalCSSClass: isModalOpen}" 
  ng-click="isModalOpen = true">

注意

div

和

按钮必须位于相同的
范围
层次结构中，才能使用相同的
isModalOpen
值。顺便说一句，我还没有试过这个代码，但这应该会给你一个想法。如果您有控制器/指令，您可以通过在范围中引入函数从那里设置
isModalOpen
：

// controller
$scope.toggleModal = function () {
  $scope.isModalOpen = !$scope.isModalOpen;
}

<div ...
  ng-click="toggleModal()">

<button ng-click="toggleModal()">...

//控制器
$scope.toggleModal=函数（）{
$scope.isModalOpen=！$scope.isModalOpen；
}
...
如果您愿意使用第三方解决方案，ng dialog是modals+Angular的优秀解决方案

谢谢。我可以成功地打开模式，但关闭它没有任何作用。我使用了您的逻辑，用
Close model
关闭模式。我使用了
ng click=“isModal=！（isModal==true）”
。这似乎只需单击div就可以了。
// controller
$scope.toggleModal = function () {
  $scope.isModalOpen = !$scope.isModalOpen;
}

<div ...
  ng-click="toggleModal()">

<button ng-click="toggleModal()">...