P0lT10n P0lT10n - 1 year ago 49
jQuery Question

Communicate with an AngularJS Directive that manipulates DOM

I am currently developing a simple one-page app where you click some

and you are able to send some data with
. This
s have a parent
where I apply CSS styles with
and all that stuff...

The problem is when I click this
I do some
calls and get a JSON to fill an internal controller variable. So, when the user clicks other menu that has nothing in common (in terms of controllers and directives) I fill other list and when the user clicks this list, I have to style the
s I mentioned before, that is a directive.

So, I don't know how to tell the
reference on the
, that it must style with some properties that I don't know how to pass too, maybe a service to read ? I thought of using a service to store the info to pass from the controller to the directive, but I am new to Angular and am not sure what to do. I searched a lot but didn't find exactly what I am looking for. I thought of using
but my variables to watch that are on a controller, so I must go to parent scope like 2 times back to reach it.

Thanks a lot !

Answer Source
<div ng-controller="Ctrl as ctrl" ng-style="ctrl.style">
   <my-dir on-fetch="ctrl.style = $style"></my-dir>

module.directive('myDir', function(){
    return {
       restrict: 'E',
       template: '<li ng-click="$ctrl.fetch()"></li>',
       controller: function(){
           var $ctrl = this;
           this.fetch = function(){
                   $ctrl.onFetch({$style: stylesFromResponse});
       bindToController: true,
       controllerAs: '$ctrl',
       scope: {
          onFetch: '&'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download