What is the AngularJS way of handling a modal like this

Question

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 for

Answer 1

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

Add Widget

  
New Widget
  

    

      
Widget Name
      
      required
    
    Add Widget
    
Cancel
  

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.