P0lT10n P0lT10n - 2 months ago 5
jQuery Question

Communicate with an AngularJS Directive that manipulates DOM

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

<li>
and you are able to send some data with
ngClick
. This
<li>
s have a parent
<div>
where I apply CSS styles with
angular.element
and all that stuff...

The problem is when I click this
ngClick
I do some
$http
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
<li>
s I mentioned before, that is a directive.

So, I don't know how to tell the
link
reference on the
directive
, 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
$watch
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
<div ng-controller="Ctrl as ctrl" ng-style="ctrl.style">
   <my-dir on-fetch="ctrl.style = $style"></my-dir>
</div>

module.directive('myDir', function(){
    return {
       restrict: 'E',
       template: '<li ng-click="$ctrl.fetch()"></li>',
       controller: function(){
           var $ctrl = this;
           this.fetch = function(){
               api.fetch().then(function(stylesFromResponse){
                   $ctrl.onFetch({$style: stylesFromResponse});
               });
           };
       },
       bindToController: true,
       controllerAs: '$ctrl',
       scope: {
          onFetch: '&'
       }
    };
});
Comments