AngularJS处理这种模态的方式是什么

我知道你不应该把你的显示逻辑放在一个控制器里面，我正在努力用正确的AngularJS方法来实现这一点

我在情态动词中呈现形式。我用Zurb基金会的启示录做模型

标记：

<div class="button" ng-click="modalAddWidget">Add Widget</div>
<div id="modalAddWidget" class="reveal-modal">
  <h6>New Widget</h6>
  <form>
    <fieldset>
      <legend>Widget Name</legend>
      <input type="text" ng-model="ui.add_widget_value" />
    </fieldset>
    <div class="small button right" ng-click="addWidget()">Add Widget</div>
    <div class="small button right secondary" ng-click="addWidgetCancel()">Cancel</div>
  </form>
</div>

注意：$scope.ui是一个用于存储ui值的对象，在用户实际单击“添加小部件”之前，该值不应绑定到我的对象

$scope.myobj是存储我的数据的地方

基金会的

$（#modalAddWidget”）.reveal（）功能显示模式覆盖

既然我不应该将显示代码放在控制器中，那么正确的方法是什么？
您不想从控制器中操作DOM（甚至引用它）

这里最好有指示

app.directive（'revealModal'，function（）{
返回函数（范围、元素、属性）{
范围$watch（attrs.revealModal，函数（val）{
如果（val）{
元素触发器（“揭示：打开”）；
}否则{
要素触发（“揭示：关闭”）；
}
});
元素揭示（）；
}
});

然后在控制器中：

  ...
  $scope.modalAddWidget = function() {
    $("#modalAddWidget").reveal();
  }
  $scope.addWidget = function() {
    $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value});
    $scope.ui.add_widget_value = '';
    $('#modalAddWidget').trigger('reveal:close');
  }
  $scope.addBudgetCancel = function() {
    $scope.ui.add_widget_value = '';
    $('#modalAddWidget').trigger('reveal:close');
  }
  ...

$scope.modalAddWidget=函数（）{
$scope.ui={add_widget_value:''}；
$scope.showmodel=true；
};
$scope.addWidget=函数（）{
$scope.myobject.widgets.push（{“name”：$scope.ui.add_widget_value}）；
$scope.ui.add_widget_value=''；
$scope.showmodel=true；
};

在你的HTML中

添加小部件
新部件
小部件名称
必修的
添加挂件
取消

基本上，您需要在范围中设置一个布尔值来显示和隐藏模式。（我不确定reveal modal的打开/关闭机制，所以我在上面的代码中猜测）

另外：我在那里添加了一些验证。
谢谢你的回答，我现在正在进行验证：在这里编辑以节省错误问题的时间：：极好的示例。非常感谢。