Angular.js return value from directive to controller

Question

I have a problem with directive. I found this plugin: http://allensarkisyan.github.io/VideoFrame/, now I have this plugin implementation in my controller:

HTML

<div class="row" ng-controller="searchDetailCtrl">
<section id="videoContainer">
    <video id="videoPlayer" width="100%" controls src="asset/tc3.mp4" type="video/mp4">
    </video>
</section>

<section id="videoControls">
    <div class="row more-margin-bottom" ng-repeat="asset in AssetDetail">
        <div class="col-sm-12">
            <button ng-click="playVideo()" class="btn btn-large btn-inverse"><i class="fa fa-play-circle fa-2x"></i></button>
                <button ng-click="pauseVideo()" class="btn btn-large btn-inverse"><i class="fa fa-pause fa-2x"></i></button>
                <button ng-click="seekBackward()" class="btn btn-large btn-inverse"><i class="fa fa-step-backward fa-2x"></i></button>
                <button ng-click="seekForward()" class="btn btn-large btn-inverse"><i class="fa fa-step-forward fa-2x"></i></button>
                <button id="markIn" ng-click="markIn()">MARKIN</button>
                <button id="markOut" ng-click="markOut()">MARKOUT</button>
                <button id="savePicture" ng-click="createPreviewScreenShot()">PICTURE</button>
            </div>
        </div>
    </section>
</div>

CONTROLLER

mwm3.controller('newSegmentationCtrl', function($scope, $timeout, SegmentationService, $route) 
{
    var jsonTimecodeArr = [];
    var jsonPictureArr = [];
    var pictureObj = new Object();
    var LogicalMedia = new Object();
    var LogicalMediaDetail = new Object();
    var Segment = new Object();
    var sequenceNumber = 0;
    var markInTime, markOutTime;
    var PictureJson;
    var timecodeJson;
    LogicalMediaDetail.Segment = [];
    $('#markIn').addClass('animated').addClass('bounce');
    $('#markOut').prop('disabled', true);
    $('#savePicture').prop('disabled', true);
    SegmentationService.connect();
    SegmentationService.subscribe(function(message) 
    {
        var obj;
        try 
        {
            //$scope.ocw.push(message);
            obj = eval("(function(){return " + message + ";})()");
            console.log(message);

            // $location.url('/searchDetail');
        } catch (e) {
            obj = eval("(function(){return " + message + ";})()");
            alert(obj.Error);
        }
    });
    var video = new VideoFrame({
    id: 'videoPlayerSegmentation',
    frameRate: 25,
    callback: function(response) {
        console.log(response);
    }
});

$scope.playVideo = function() {
    video.video.play();
};

$scope.pauseVideo = function() {
    video.video.pause();
};
$scope.seekForward = function() {
    video.seekForward('', video.triggerFrameUpdate);
};

$scope.seekBackward = function() {
    video.seekBackward('', video.triggerFrameUpdate);
};

$scope.markIn = function() {
    markInTime = video.toSMPTE();
    var typeCut = 'MARKIN';
    jsonTimecodeArr.push('{ "frame": "' + markInTime + '" , "typeCut": "' + typeCut + '" }');
    timecodeJson = buildJSON();
    $scope.timecodeList = timecodeJson;
    $scope.$apply;

    $('#markIn').prop('disabled', true);
    $('#markOut').prop('disabled', false);
    $('#markIn').removeClass('animated').removeClass('bounce');
    $('#markOut').addClass('animated').addClass('bounce');
    $.notify("MARKIN ESEGUITO", "success");
};

$scope.markOut = function() {
    markOutTime = video.toSMPTE();
    var s = verifyTimecode(markOutTime, markInTime);
    var the_char = s.charAt(0);

    if (the_char != '-') {
        var typeCut = 'MARKOUT';
        jsonTimecodeArr.push('{ "frame": "' + markOutTime + '" , "typeCut": "' + typeCut + '" }');
        timecodeJson = buildJSON();
        $scope.timecodeList = timecodeJson;
        $scope.$apply;

        $('#markOut').prop('disabled', true);
        $('#savePicture').prop('disabled', false);
        $('#markOut').removeClass('animated').removeClass('bounce');
        $('#savePicture').addClass('animated').addClass('bounce');
        $.notify("MARKOUT ESEGUITO", "success");
        sequenceNumber++;
    } else {
        $.notify("ATTENZIONE IL TIMECODE MARKOUT E' INFERIRE AL MARKIN", "error");
    }
};


$scope.createPreviewScreenShot = function() {
    var c = video.toSMPTE(),
    a = document.createElement("canvas");
    a.width = video.video.videoWidth;
    a.height = video.video.videoHeight;
    a.getContext("2d").drawImage(video.video, 0, 0);
    a = a.toDataURL("image/jpeg");
    pictureObj.Image = a;
    pictureObj.Timecode = c;
    jsonPictureArr.push('{ "Image": "' + a + '" , "Timecode": "' + c + '" }');
    PictureJson = buildJSONPicture();
    $scope.imagesList = PictureJson;
    $scope.$apply;
    console.log(PictureJson);
    $('#savePicture').prop('disabled', true);
    $('#savePicture').removeClass('animated').removeClass('bounce');
    $('#saveSingleSegment').removeClass('noDisplay').addClass('animated').addClass('bounce');

};

$scope.deleteSegment = function() {
    $('#markIn').prop('disabled', false);
    $('#markOut').prop('disabled', false);
    $('#saveSingleSegment').removeClass('fadeInDown').addClass('noDisplay');
    $.notify("ELIMINAZIONE SEGMENTAZIONE ESEGUITA CON SUCCESSO", "success");
    markInTime = '';
    markOutTime = '';
};

$scope.buildSingleSegment = function() {
    if ($scope.segmentName) {
        Segment.Sequence = sequenceNumber;
        Segment.Name = $scope.segmentName;
        Segment.SegmentImage = pictureObj.Image;
        Segment.TimeCodeIn = markInTime;
        Segment.TimeCodeOut = markOutTime;
        LogicalMediaDetail.Segment.push({
            Sequence: Segment.Sequence,
            Name: Segment.Name,
            SegmentImage: Segment.SegmentImage,
            TimeCodeIn: Segment.TimeCodeIn,
            TimeCodeOut: Segment.TimeCodeOut
        });
        $('#markIn').prop('disabled', false);
        $('#markOut').prop('disabled', false);
        $('#savePicture').prop('disabled', false);
        $('#markIn').addClass('animated').addClass('bounce');
        $('#saveSingleSegment').removeClass('animated').removeClass('bounce').addClass('noDisplay');
        $.notify("SEGMENTAZIONE SALVATO CON SUCCESSO", "success");
    } else {
        $.notify("INSERIRE IL NOME DELLA SEGMENTAZIONE", "info");
    }
}

$scope.sendSegment = function() {
    LogicalMediaDetail.Id = 0;
    LogicalMediaDetail.AssetId = idAssetSegmentation;
    LogicalMediaDetail.Name = $scope.segmentationName;
    LogicalMedia.LogicalMedia = LogicalMediaDetail;
    var myString = JSON.stringify(LogicalMedia);
    SegmentationService.send(myString);
    console.log(myString);
    $.notify("SEGMENTAZIONE SALVATA CON SUCCESSO", "success");
    $route.reload();
};

$scope.remove = function(image) {
    var index = $scope.imagesList.indexOf(image);
    var index2 = jsonPictureArr.indexOf(image);
    if (index != -1) {
        $scope.imagesList.splice(index, 1);
    }
    if (index2 != -1) {
        jsonPictureArr.splice(index, 1);
    }
};

function verifyTimecode(markOut, markIn) {
    var ms = moment(markOut, "HH:mm:ss:ms").diff(moment(markIn, "HH:mm:ss:ms"));
    var d = moment.duration(ms);
    var s = Math.floor(d.asHours()) + moment.utc(ms).format("HH:mm:ss:ms");

    return s;
}

function buildJSON() {
    var b = "[" + jsonTimecodeArr.join(",") + "]";
    return JSON.parse(b)
}

function buildJSONPicture() {
    var b = "[" + jsonPictureArr.join(",") + "]";
    return JSON.parse(b)
}

function getScreenShot() {
    var c = video.toSMPTE(),
    a = document.createElement("canvas");
    a.width = video.video.videoWidth;
    a.height = video.video.videoHeight;
    a.getContext("2d").drawImage(video.video, 0, 0);
    a = a.toDataURL("image/jpeg");
}

});

I want to convert this in directive to reuse it in other page but I don't understand how I can return the values that are now in my controller $scope function from the directive.

For example, in my controller i have:

$scope.markIn = function() {
    markInTime = video.toSMPTE();
    .....
};

I want to return markInTime from directive to my controller.

you can help me understand?

thanks in advance

ADDITIONAL INFORMATION

HTML

 <div ng-controller="TestPlayerCtrl">
    <div my-directive my-directive-fn="controllerFunction"></div>
</div>

CONTROLLER

    mwm3.controller("TestPlayerCtrl", function($scope){
  $scope.controllerFunction = function(valueFromDirective){
     console.log(valueFromDirective);
   }
});

DIRECTIVE

    mwm3.directive("myDirective", function(){
  return {
   scope: {
     "myDirectiveFn": "="
   },
   link: function($scope){
     $scope.somethingHappend = function(){
       $scope.myDirectiveFn("pass this string");
     }
   }
  }
});

but I don't see any output in the console. Thanks in advance

Peter Albert · Accepted Answer · 2015-09-12 15:42:01Z

19

Just pass a hook/callback-method into the directive as a variable:

app.directive("myDirective", function(){
  return {
   scope: {
     "myDirectiveFn": "="
   },
   link: function($scope){
     $scope.somethingHappend = function(){
       $scope.myDirectiveFn("pass this string");
     }
   }
  }
});

And in the html

<div my-directive my-directive-fn="controllerFunction"></div>

And the controller

app.controller("someCtrl", function($scope){
  $scope.controllerFunction = function(valueFromDirective){
     console.log(valueFromDirective);
   }
});

EDIT: Added Working Plunker

edited Sep 12, 2015 at 15:42

Peter Albert

17.6k6 gold badges68 silver badges89 bronze badges

answered Jun 30, 2014 at 17:55

Konstantin Krass

8,6461 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3790694 Over a year ago

Hi Konstantin Krass, I try id but don't work for me. You can see my test in next answer

Konstantin Krass Over a year ago

sure, you need to trigger the directives somethingHappend function. See my working plunker link.

Collectives™ on Stack Overflow

Angular.js return value from directive to controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related