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

问题描述

我知道你不应该把你的显示逻辑控制器里面，我用正确的方式AngularJS努力接近这一点。

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.

我在里面模态presenting形式。我使用Zurb基金会揭示了模态。

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

标记：

<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.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值，直到用户实际点击添加窗口小部件的对象。

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是我的数据的存储位置。

$scope.myobj is where my data is stored.

基金会 $（＃modalAddWidget）显示（）; 函数presents模式叠加

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

由于我不应该把我的显示器code控制器内，什么是解决这个正确的方法是什么？

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

推荐答案

您不想操作DOM（甚至引用它）从你的控制器。

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

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

基本上，你会设置一个布尔值在你的范围，以显示和隐藏的模式。 （我不知道泄露模式的开启/关闭机构的，所以我猜以上在我的code）。

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