处理这样的模态的 AngularJS 方式是什么 [英] What is the AngularJS way of handling a modal like this

问题描述

我知道你不应该将你的显示逻辑放在控制器中，我正在努力寻找正确的 AngularJS 方法来解决这个问题.

我在模态中展示表单.我正在使用 Zurb Foundation 的 Reveal 作为模态.

标记:

添加小部件
<div id="modalAddWidget" class="reveal-modal"><h6>新小部件</h6><表格><字段集><legend>小部件名称</legend><input type="text" ng-model="ui.add_widget_value"/></fieldset><div class="右侧小按钮" ng-click="addWidget()">添加小部件</div><div class="小按钮右侧次要" ng-click="addWidgetCancel()">取消</div></表单>

控制器:

<代码> ...$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.ui 是我用来存储 UI 值的对象，在用户实际单击添加小部件"之前不应将其绑定到我的对象

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

Foundation 的 $("#modalAddWidget").reveal(); 函数展示了模态叠加.

既然我不应该把我的显示代码放在控制器中，那么处理这个问题的正确方法是什么?

解决方案

您不想从控制器操作 DOM(甚至引用它).

此处最好使用指令.

app.directive('revealModal', function (){返回函数(范围，元素，属性){scope.$watch(attrs.revealModal, function(val) {如果(瓦尔){elem.trigger('显示:打开');} 别的 {elem.trigger('reveal:close');}});elem.reveal();}});

然后在您的控制器中:

$scope.modalAddWidget = function (){$scope.ui = { add_widget_value: '' };$scope.showModal = true;};$scope.addWidget = 函数 (){$scope.myobject.widgets.push({"name": $scope.ui.add_widget_value});$scope.ui.add_widget_value = '';$scope.showModal = true;};

在你的 HTML 中

添加小部件
<div id="modalAddWidget" class="reveal-modal"reveal-modal="showModal"><h6>新小部件</h6><表单名称="addWidgetForm" ng-submit="addWidget()"><字段集><legend>小部件名称</legend><input type="text" name="widgetValue" ng-model="ui.add_widget_value" required/><span ng-show="addWidgetForm.widgetValue.$error.required">必需</span></fieldset><button type="submit" class="small button right">添加Widget</button><div class="右辅助小按钮" ng-click="showModal = false;">取消</div></表单>

基本上你会在你的范围内设置一个布尔值来显示和隐藏你的模式.(我不确定显示模态的打开/关闭机制，所以我在上面的代码中猜测).

另外:我努力在那里添加了一些验证.

I know you're not supposed to put your display logic inside of a controller and I'm struggling with the proper AngularJS way to approach this.

I'm presenting forms inside modals. I'm using Zurb Foundation's reveal for the modal.

Markup:

<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>

Controller:

  ...
  $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');
  }
  ...

Note: $scope.ui is an object I am using to store UI values that shouldn't be bound to my object until the user actually clicks "Add Widget"

$scope.myobj is where my data is stored.

Foundation's $("#modalAddWidget").reveal(); function presents the modal overlay.

Since I shouldn't be putting my display code inside the controller, what is the proper way to approach this?

解决方案

You don't want to manipulate the DOM (or even reference it) from your controllers.

A directive is best here.

app.directive('revealModal', function (){
   return function(scope, elem, attrs) {
     scope.$watch(attrs.revealModal, function(val) {
        if(val) {           
           elem.trigger('reveal:open');
        } else {
           elem.trigger('reveal:close');
        }
     });
     elem.reveal();
   }
});

then in your controller:

$scope.modalAddWidget = function (){
   $scope.ui = { add_widget_value: '' };
   $scope.showModal = true;
};

$scope.addWidget = function (){
    $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value});
    $scope.ui.add_widget_value = '';
    $scope.showModal = true;
};

And in your HTML

<div class="button" ng-click="modalAddWidget()">Add Widget</div>
<div id="modalAddWidget" class="reveal-modal" reveal-modal="showModal">
  <h6>New Widget</h6>
  <form name="addWidgetForm" ng-submit="addWidget()">
    <fieldset>
      <legend>Widget Name</legend>
      <input type="text" name="widgetValue" ng-model="ui.add_widget_value" required />
      <span ng-show="addWidgetForm.widgetValue.$error.required">required</span>
    </fieldset>
    <button type="submit" class="small button right">Add Widget</button>
    <div class="small button right secondary" ng-click="showModal = false;">Cancel</div>
  </form>
</div>

Basically you'd set a boolean in your scope to show and hide your modal. (I'm not sure of reveal modal's open/close mechanism, so I'm guessing in my code above).

ALSO: I went through the effort of adding some validation in there.

这篇关于处理这样的模态的 AngularJS 方式是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！