Что такое метод AngularJS для обработки модального типа

Я знаю, что вы не должны вводить свою логику отображения внутри контроллера, и я борюсь с правильным способом AngularJS, чтобы приблизиться к этому.

Я представляю формы внутри модалов. Я использую Zurb Foundation для модального.

Примечание: $scope.ui - это объект, который я использую для хранения значений пользовательского интерфейса, которые не должны привязываться к моему объекту, пока пользователь не наберет "Добавить виджет"

Функция Foundation $("#modalAddWidget").reveal(); представляет модальный оверлей.

Так как я не должен помещать свой код дисплея внутри контроллера, каков подходящий способ приблизиться к этому?

Ответы

Ответ 1

Вы не хотите манипулировать DOM (или даже ссылаться на него) с ваших контроллеров.

Лучше всего указывать директиву.

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

затем в вашем контроллере:

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

В основном вы должны установить логическое значение в своей области, чтобы показать и скрыть свой модальный. (Я не уверен в том, что вы открываете модальный механизм открытия/закрытия, поэтому я предполагаю, что в моем коде выше).

ТАКЖЕ: Я прошел через усилие добавления там валидации.