btford / angular-modal Goto Github PK

as a developer, i'd like to access modal's element, if present in the DOM

something like modalService.element()

Hello. Can anyone show example, how to disable animation when modal window appear or how to change scope variables and re-render window? Thanks.

Angular 1.4 no longer accepts a callback as an option. (angular/angular.js#11826)
So on deactivate:

   function deactivate () {
      var deferred = $q.defer();
      if (element) {
        $animate.leave(element, function () {
          scope.$destroy();
          element = null;
          deferred.resolve();
        });
      } else {
        deferred.resolve();
      }
      return deferred.promise;
    }

should now be:

    function deactivate () {
      var deferred = $q.defer();
      if (element) {
        $animate.leave(element)
          .then(function () {
            scope.$destroy();
            element = null;
            deferred.resolve();
          });
      } else {
        deferred.resolve();
      }
      return deferred.promise;
    }

I noticed that the modal only shows up, or is created at all, at the first call of activate in Angular 1.3.
By that I don't mean calling activate twice in succession (which doesn't make a lot of sense), but calling it in a way that I'd expect to work:

modal.activate(); // shows up
asyncOperation().then(function() {
  modal.deactivate();
  modal.activate(); // does not show up
  otherAsyncOperation.then(modal.deactivate);
});

I first thought it might be a CSS issue on my end, but putting a test statement console.log('instantiating loading ctrl'); inside the modal's controller showed that the controller won't be instantiated again after the modal is closed the first time.

All this, however, works as expected when I use Angular 1.2.x instead.

I upgraded my angular to 1.3.15 and the btfmodal to the latest and when opening a modal that has params from the parent scope it doesn't seem to be passing them.

I'm doing something like:
newModalService.activate({ id: itemId });

I believe there is an issue with the new version 0.5.0 on the attach function when doing locals.$scope = scope and $controller(controller, locals) because locals are not being added to the $scope.

Reverted to 0.4.0 and everything is fine.

Has anyone had the same problem?

I find that I must include ng-annotate to use this module. I got around it by requiring the minified version:
require('../../node_modules/angular-modal/modal.min');

It would be great if you could run ng-annotate on the unminified version that you provide.

Currently at v0.0.4 but the Plunker demo is using v0.0.3. While I didn't notice any obvious difference in usability of the demo, v0.0.3 doesn't use $animate, does not destroy the scope on deactivate, and lacks the active method.

Thank you for your work on this service!

Throwing an idea out there:

I would like to be able to do something along the lines of:

    angular.module('MyApp')
        .factory('libraryModal', function(btfModal) {
            return btfModal({
                controller: '...',
                controllerAs: 'modal',
                templateUrl: '...',
                beforeActivate: function() {
                    ....
                },
                afterDeactivate: function() {
                    ....
                }
            });
        });

The scenario I have is when I go full screen I want to do two things:

1. Hide scroll bars on the body of the document
2. Hide thumb videos that display in the UI (QuickTime seems to sit on top of everything)

Because these are mostly UI changes I figured I don't want to do this in the controllers so this would be a good solution.

Thoughts?

I'm getting this error when calling deactivate (subsequent calls to activate fail):

 TypeError: Cannot read property 'then' of undefined

on this line:
https://github.com/btford/angular-modal/blob/master/modal.js#L75

I rolled back to v0.4.0 and there is no error.

Hello,
I like the module so far, however I am having a little problem with its' implementation.

1. I have a main controller, where I am watching the modal service "active" value. This watcher changes a scope value in that controller in order to reflect in the view whether this modal is open or not.

   $scope.$watch( function() { return Modal.active(); },
   function(newValue) {
   $scope.ModalActive = newValue;
   }
   );

2. In the controller of the modal I have a function:

$scope.closeModal = function() {
Modal.deactivate();
};
3. When this function is activated the modal does close, however the watcher in the main controller does not pick up the "active" value change.

I understand this is an async problem. A quick fix could be something with $timeout, but I am sure there is a more elegant solution. Any ideas?

I think that would make sense to have in a modal plugin as a default option.

This library feels difficult to use and reason about, and overall it seems unfinished. How can I make close the modal?

For now I'm going with https://github.com/vesparny/angular-fancy-modal since it works great out the box..

I'm looking forward to access the template element from the controller:

return btfModal({
  controller: 'MyCtrl'
  template: '<div class="btf-modal">Hello {{ctrl.name}}</div>'
});

controller('MyCtrl', function ($element) {
  // $element should be equal to an element pointing to `.btf-modal`.
});

Is this currently possible somehow (from $element or the modal service, etc)?

Hi,

I changed my modal service to also destroy the scope when the modal window is deactivated.

The scope that gets created when calling activate() doesn't get killed and is never garbage collected.

Can I make a pull request to fix this?

Please tell me examples of how I can animate modal window

The modal currently fails if the template contains no elements (just text).

The readme says this is a component eg:

<angular-modal display="$ctrl.display">
  <div>something in modal {{ $ctrl.someProp }} </div>
</angular-modal>

but this is not a component, it's a service.

As far as I can tell, $scope for the controller isn't destroyed when closing the modal.

I might be doing something wrong, but I'm airing the issue anyway.

I've done this locally, i'll do a pull request in a few days.

$animate.leave no longer accepts a callback as a second parameter, but instead returns a promise.

In the code shown below, the anonymous function passed to $animate.leave is never executed. As a result of the element variable not being set to null, the modal is not displayed on subsequent activate calls.

function deactivate () {
  var deferred = $q.defer();
  if (element) {
    $animate.leave(element, function () {
      scope.$destroy();
      element = null;
      deferred.resolve();
    });
  } else {
    deferred.resolve();
  }
  return deferred.promise;
}

This is the commit that made the breaking change.

I made a mod that allows for supplying two templates, the "wrapper" and the modal template. This way you can share certain root nodes/styles between different modal sets without template duplication. Would this be a desired feature that you might pull? If so, I can make it compatible with the Angular 1.3 version. Currently it only works with the older version.

See this Gist: https://gist.github.com/vance/ef8a5714fc116c8ab247

I am having a weird problem where the element doesn't get compiled in time for $animate to properly add the animation classes. I have a directive within the template. If I move the $animate.enter line after $compile, then everything works as intended. I have been unable to reproduce the problem in isolation. Any ideas?

    function attach (html, locals) {
      element = angular.element(html);
      if (element.length === 0) {
        throw new Error('The template contains no elements; you need to wrap text nodes')
      }
      // original $animate
      scope = $rootScope.$new();
      if (locals) {
        for (var prop in locals) {
          scope[prop] = locals[prop];
        }
      }
      var ctrl = $controller(controller, { $scope: scope });
      if (controllerAs) {
        scope[controllerAs] = ctrl;
      }
      $compile(element)(scope);
      $animate.enter(element, container); // new $animate
    }

I am trying to use your lib in combination with state resolves of ui-router and my code looks a bit like this:

.state({
    name: 'main',
    url: '/main',
    controller: 'InputViewCtrl',
    templateUrl: 'tpl/overviewInput.html',
    resolve: {
        tasks: function(Shared, TaskService){
            return TaskService.getTasks(Shared.getMonthParameters())
        }
    }
})
.state({
    name: 'main.addtask',
    url: '/addtask',
    onEnter: function(modal, tasks){
        modal.activate(); 
    },
    onExit: function(modal){
        modal.deactivate();
    },
    resolve:{
        modal: function(btfModal){
            return btfModal({
                controller: 'ExternalTaskAddCtrl',
                controllerAs: 'modal',
                templateUrl: 'tpl/partials/externalTaskAdd.html'
            });
        }
    }
})

So as you can see, in my 'main' state I resolve the tasks variable and in my sub-state 'main.addtask' I wish to use this that variable. Now I could easily fix this with:

modal.activate({tasks : tasks});

But that loses the dependency injection in my modal and is directly inserted in the scope. Is there a way I can achieve it that looks similar to what the angular ui-bootstrap modal is doing?[1]

[1] https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

-edit: link was broken

I have two directives that both encapsulate btfModals, each directive has a module like:

loginModalFactory = (btfModal) ->
  return btfModal(
    controller:   'loginModalController'
    controllerAs: 'modal'
    templateUrl: 'components/login/login.html'
  )

and

logOutModalFactory = (btfModal) ->
  return btfModal(
    controller:   'logOutModalController'
    controllerAs: 'modal'
    templateUrl: 'components/logOut/logOut.html'
  )

Both factories are wrapped in separate directives and modules which are then injected into my app. However, I can only see the stylings for the logOut modal whose encapsulating directive comes after the login directive. I understand that factories are singletons, so what is the recommended way to create multiple directives w/ multiple config objects?

Thank you,

I'm trying to attach content to ctrl before activating and the content doesn't render:

        ctrl.otherContent = 'blah'; // works
        $scope.openModal = function(content) {
            ctrl.content = content; // doesn't work
            modalService.activate();
        };

probably a noobish question, but how would one approach a reusable directive for modals?

what i'm trying to achieve is to have a "dynamic" content and a modal that i could invoke "externally" - from other controllers

sample use case:

<modal ng:controller="alertModal">
  hi there! I'm {{ alertModal.name }}
</modal>

modal.html

<section class="modal">
  <header>
    <h5 ng:if="title">{{ title }}</h5>
    <button class="close" ng:click="close()">&times;</button>
  </header>
  <div ng:transclude></div>
</section>

directive

app.directive('modal', function () {
  return {
    restrict    : 'E',
    templateUrl : 'modal.html',
    transclude  : true,
    replace     : true,
    // probably the missing part goes here?
  }
});

I tried to install with bower:
bower install --save angular-modal#~0.2.0

I get an error with the following additional details:
Available versions: 0.1.0, 0.0.3, 0.0.2, 0.0.1

Not too familiar with registering packages w/ bower. Is there something that needs to be done in order to register a new version with the bower registry?

Would be great to add an option to add an overlay when the modal is active.

Our team encountered this problem:

• we raise a welcome modal on a given page
• user hits back button and welcome modal remains

Programmatically closing the modal registers as a dismissal, which
prevents it from opening on user's return to the page.

Our solution was to give the modal a local scope. Is there a good reason to put/have the modal in $rootScope?

I was wondering if anyone had a good method of testing the controller that is instantiated by angular-modal's service.activate (when sending locals)? Is it best to grab the controller's scope from it's container? Just wondering what the best practices is around this?

Hey.

Would it be possible to provide a built in $animate support for shown / hidden modals?

with a "hard" dependency of $animate, i managed to achieve it by adding

    function attach (html, locals) {
      // ...
      $animate.addClass( element, 'shown' );
    }
    // ...
    function deactivate () {
      if (element) {
        $animate.removeClass( element, 'shown', function () {
          scope.$destroy();
          element.remove();
          element = null;
        });
      }
    }

Ideal solution would use an optional dependency, but I'm not sure how to solve that.
Or should i use a decorator?

Sorry if the request is noobish - still a fresh-comer