CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Fabrizio Fenoglio
Fabrizio Fenoglio

Reputation: 5947

trigger Controller scope from directive AngularJs

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

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>

Upvotes: 0

Views: 296

Answers (2)

pedrommuller
pedrommuller

Reputation: 16066

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>

Upvotes: 1

Sebastian Piu
Sebastian Piu

Reputation: 8008

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)

Upvotes: 0

Related Questions