0

I'm from JQuery, and my first steps with AngularJs are getting me a little bit confused...

My case :
I have a panel (#floatingpanel) that is hidden with css (top:-50px), out of the viewport.
I have a link (a.trigger), in the deepest of my app, and when you click on that link the "top" property of my panel goes from "-50px" to "0px" to make it visible (you click to toggle the visibility). The panel is just at this end of the main container of my page, but the link it's in hundreds of others div.

Let's have a look to the DOM structure :

<body>
  <div class="main-wrapper" ng-app="myapp">
    <div class="app">
      <div class="many-things">
        [...]
        <a href="#" class="trigger" ng-click="toggleMyPanelVisibility()">
          Click here to see the panel
        </a>
        [...]
      </div>
    </div><!-- .app -->

    <div id="floatingpanel">
        Hey ! I was hidden !
    </div>

  </div> <!-- #mainwrapper -->
</body>

In jQuery, It would be :

$('a.trigger').click( function(e) {
  e.preventDefault();
  var el = $('#floatingpanel');
  var top = el.css('top');
  if (top<0) el.css('top', 0);
   else  el.css('top', -50);
});

How can I make it with AngularJs ?

I would do it like that :

var app = angular.module('myapp');
app.run(["$rootScope", function($rootScope) {
    // Toggle du myaccountpanel
    $rootScope.floatingpanelVisibility = false;
    $rootScope.toggleMyPanelVisibility = function() {
        $rootScope.floatingpanelVisibility = !$rootScope.floatingpanelVisibility;
        var panel = angular.element( $('#floatingpanel') );
        var top = -50;
        if ($rootScope.floatingpanelVisibility)
            top = 0; 
        panel.css({'top': top });
    }

});

Ok, it works but... i guess my app.run will be overloaded very soon if I continue this way, no ? I also can do it with a controller on my "main-wrapper" but it's stupid, it's already my app scope !

How can I do it with a directive ?
What could be the "best way" to solve that mess ?

Joundill
  • 6,828
  • 12
  • 36
  • 50
Dam Fa
  • 448
  • 4
  • 16

3 Answers3

2

The two most common ways I've seen to do this in Angular is via rootscope messaging or via a service. The service is the cleaner/better of the two.

The accepted answer assumes everything is under the same controller, and that's expressly not the way to structure what the OP describes.

Imagine a page comprised of a bunch of widgets - either child views or directives, all handled by their own, independent controllers. That's the correct way to handle what the OP describes as "all that stuff" in Angular.

Now, you need a way to trigger an event in one that can be responded to by any of the others. If you define a service, say, "pageEventService" that exposes a function to initiate/trigger the event "togglePanel", as well as a property that holds the state - "panelIsVisible", you can reference that service wherever you need to trigger the event, and reference it in the Panel to respond to the value.

.controller('SomeControllerThatCanTriggerEvent', function(pageEventService) {
    var model = this;
    model.togglePanel = pageEventService.togglePanel;
});

somewhere in the markup controlled by this controller...

<a ng-click="model.togglePanel()">Toggle the Panel</a>

in the Panel controller...

.controller('PanelController', function(pageEventService) {
    var model = this;
    model.panelIsVisible = pageEventService.panelIsVisible;
});

and in the Panel markup...

<div id="TheAlmightyPanel" ng-show="model.panelIsVisible">... cool stuff here ...</div>

This is cleaner than rootscope messaging because you can be explicit about what pageEventService can do and about who references it. You can use it in views, child-views, and directives - wherever you need it.

Tim Hardy
  • 1,654
  • 1
  • 17
  • 36
1

What you are doing can just be done without touching DOM, using built in angular directives itself, here i am just using ng-show directive, if you want to put specific class to it then just use ng-class as well, and any animation can just be provided as css animations and with the inclusion of ngAnimate module it gets better you can use the classnames added to provide animation behavior.

Example:-

<div class="main-wrapper" ng-app="myapp">
   <div ng-controller="panelController as panel">
    <a href="#" class="trigger" ng-click="panel.toggle($event)">Click here to see the panel</a>
    <div  ng-show="panel.show" class='panel'> 
    <!-- <div  ng-class="{'show':panel.show}"> and define css rules for panel.show-->
        Hey ! I was hidden !
    </div>
   </div>
  </div>

in the controller panelController 

angular.module('app').controller('panelController', function($scope){
    var vm = this;
    vm.show = false;
    this.toggle  = function($event){
       $event.preventDefault();
       vm.show = !vm.show;
    }
});

I am here just using controller As syntax you could use $scope as well if you would like and you can even convert this to a directive.

Edit based on your question update:

There is nothing bad in creating a controller and using built in angular directives as and when you need then rather than using jquery/manual dom manipulation when you really do not need to. 

<body>
  <div class="main-wrapper" ng-app="myapp" ng-controller="mainController as main">
    <div class="app">
      <div class="many-things">
        [...]
        <a href="#" class="trigger" ng-click="main.togglePanel($event)">Click here to see the panel</a>
        [...]
      </div>
    </div><!-- .app -->

    <div id="floatingpanel" ng-show="panel.show">
        Hey ! I was hidden !
    </div>

  </div> <!-- #mainwrapper -->
</body>

And here is the bad answer probably you are onto since you seem to be looking at not creating a controller or redesign your views.

 .directive('togglePanel', function(jQuery){
      return {
         restrict: 'A',
         link:function(scope, elm, attr){
             elm.on('click', handleToggle);

             scope.$on('$destroy', function(){
                elm.off('click', handleToggle);
             });

             function handleToggle(e){
               var $target  = jQuery(attr.togglePanel);//Get the target
               //Do what you want to do with the target
             }
         }
      }

    }).constant('jQuery', window.jQuery);

and use it as:

 <a href="#" class="trigger" toggle-panel="#floatingPanel">Click here to see the panel</a>
PSL
  • 123,204
  • 21
  • 253
  • 243
  • I'm not really satisfied by this answer because you have created a wrapper div (the controller) around the 2 elements : and it's exactly my point. Imagine that the link is in the deep of my app, wrapped in hundred of others div etc... On this other side, the panel is outside of all that stuff, it's the last element of my main-wrapper. As you do, the panelController is a wrapper of all my app (including the trigger link) + the panel. Do I need this controller/wrapper for this so little feature ?! I would like to avoid it. – Dam Fa Feb 08 '15 at 01:41
  • 1
    @DamFa you do not have to create a wrapper ofcourse, you still have to [work your mind from jquery way to angular way](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). As i said you could just create a directive, panelDirective. i just showed you an example on how to use it. there are numerous angular ways to do it. And your actual code is completely full of bad practices like DOM access, placing properties on rootscope, binding jquery click handlers etc.. – PSL Feb 08 '15 at 01:42
  • Thanks. For sure, you're right, I have to work my mind to the angular way ! My solution works fine but I obviously notice that is full of bad practices... I'm gonna work on it but it's why I needed to be oriented to other solutions. – Dam Fa Feb 08 '15 at 01:54
  • Ok just saw your question update. Why cant you just use any controller? You also need to think of testability in your application, avoid doing these kind of stuffs with rootscope. Just create as many controller and views as it takes, nothing wrong with that it is a complete MVVM approach. – PSL Feb 08 '15 at 01:54
0

Ok ! Thanks to @PSL, I've understood that it's not a problem if I setup a controller on my ng-app element.

<div class="main-wrapper" ng-app="myapp" ng-controller="mainController as main">

I thought it was a bad practice...
With that "mainController" I can easily interact with my 2 elements : with the link via an ng-click, and with the panel via an ng-class (or ng-show etc.) I cannot see a better way to do. If I avoid this "mainController" I could make a directive but to touch my panel it forces me to access DOM outside of the scope...

I definitely have to change my mind from the jquery way to the angular way (this link can help).

Community
  • 1
  • 1
Dam Fa
  • 448
  • 4
  • 16