CODEWITHSUNDEEP
javascriptjqueryangularjs
matiaslauriti
matiaslauriti

Reputation: 8090

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 !

Upvotes: 0

Views: 47

Answers (1)

Valery Kozlov
Valery Kozlov

Reputation: 1577

<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: '&'
       }
    };
});

Upvotes: 1

Related Questions