0

I have a TimelineController that has a publish function on the scope, that will send some data to the server.

My timeline is composed by 2 directives

  • timeline (Element)
  • share-post (Element)

I would like to be able to call from the share-post directive the publish function on my TimelineController is that possible?.

Controller

function TimelineController($scope,TimelineService)
    {
        $scope.posts = [];

        $scope.publish = function(wall_type,wall_id,text,video,image) {
            console.log('click controller');
            TimelineService.publishPost(wall_type,wall_id,text,video,image).$promise.then(function(result){
               $scope.posts.push(result.response);
            });
        };
    }

Timeline Directive:

function timelineDirective() {

        return {
            restrict: 'E',
            replace: true,
            scope: {
                type: '@',
                ids: '@',
                postime: '&',
                posts: '='
            },
            templateUrl:"/js/templates/timeline/post-tmpl.html",
            controller: function($scope,$element) {

                this.type = $element.attr('type');
                this.ids = $element.attr('ids');
            }
        }
    };

Timeline Directive Template

<ol class="timeline" ng-init="postime({wall_type:type,wall_id:ids})">
    <li>
       <share-post></share-post>
    </li>
    <li ng-repeat="post in posts">
       {{post.text}}
    </li>
</ol>

SharePost Directive: From this directive I would like call the publish on the TimelineController

function sharePost() {

        return {
            restrict: 'E',
            replace: true,
            require: "^timeline",
            templateUrl:"/js/templates/timeline/share-tmpl.html",
            link: function($scope,$element,$attr,ctrl) {
                $scope.pub = function() {

                    // This does not work because it call the parent directive
                    // Instead of controller
                    $scope.publish(ctrl.type, ctrl.ids, $scope.text);
                }
            }
        }
    };

Sharepost Directive Template

<div class="module comment">
    <div class="content">
        <textarea class="form-control" ng-model="text" placeholder="What is going on..." rows="2"></textarea>
    </div>

    <button type="button" class="btn" ng-click="pub()"> Share</button>

</div>
Improve this question
4
  • I think you should either inject the TimelineService service directly into your directive or inject the "publish" function into the scope of your directive using attributes Commented Oct 29, 2014 at 14:41
  • I would like avoid to inject the Service to the directive Commented Oct 29, 2014 at 14:54
  • @Fabrizio, let me get this straight, do you want to fire a click event on the controller from a directive? Commented Oct 29, 2014 at 14:59
  • @jack.the.ripper I want fire the function $scope.publish in the controller from an event click from the directive. Commented Oct 29, 2014 at 15:04

2 Answers 2

Reset to default
1

well you use your directive just to bind the event click from the controller, something like:

angular.module('module').directive('sharePost', [
        function(){
            return {
                link: function (scope, element, attr) {
                    var clickAction = attr.clickAction;
                    element.bind('click',function (event) {
                        scope.$eval(clickAction);
                    });
                }
            };
    }]);

html

 <a sharePost click-action="publish(wall_type,wall_id,text,video,image)"> publish</a>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for your answer, it seem interesting but I didn't get where that function come from, that function was meaning the publish function on the controller? Thanks
sorry I just copied and pasted it from your code, forgot to reference the controller scope, that's just your publish function
Ok, now make more sense, I'll try that it sounds good to me :)
I tried this but it doesn't work because the directive still doesn't know about the publish function. That sharePost directive is a child directive of another directive
0

Change your directive to have an extra item in the scope like this onPublish: "@" then in your html you can pass a pointer to the controller function you want to invoke like this: 

 <share-post on-publish="publish"></share-post>

to call this from the directive you have to do:

$scope.onPublish()(ctrl.type, ctrl.ids, $scope.text)
Improve this answer

6 Comments

This way does not work, because how you can see the share-post directive is child of timeline if I pass the publish method how you showed it try to get the parent directive publish I guess.
I missed the nested directives, you can achieve calling the controller method by passing the function from the controller to the parent directive, and then from there to the child one. But this is a bit nasty. Another way would be to have a service injected (a new one) in the child directive and in the controller, so you can use that to communicate
Yhea you explained what i was saying better then me, it is nasty to pass from parent directive to child directive. Thanks a lots, may you show a small example on how with a service I can put in communication, directive and controller?
Now that I think, it would not be wrong to declare which method you want called once a click in the directive happens, as long as the attribute is named accordingly, e.g. on-post-clicked or something of that sorts
That's ok but I don't think this way is the more correct way: pastebin.com/Ytjbjq9x because I pass the publish scope on the timeline directive that it doesn't need of it but is just a bridge to let that scope available to the child directive. Correct me if I'm wrong, and if this solution is fine
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.