Accessing controller function in Directive scope

Question

I am trying to access the function defined in the controller scope from directive nested in another directive. I am using the "&" and passing the function name as the attribute to the directive, however I am still not able to reach the function in the controller scope.

Could some one correct where I am going wrong? I had spent few hours trying to find that I have to use the "&" for reaching controller scope but stuck here after whatever I did.

JSFiddle here - http://jsfiddle.net/fwR9Q/12/

Code:

<div ng-controller="PlayerCtrl">
<div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="video in videos" >
<tf-video src="{{video.src}}" width="{{video.width}}" handleClick="playVideo(videoId, modeNum)" height="{{video.height}}" title="{{video.title}}"/>
</div>
</div>

<script>
    var myApp = angular.module('myApp', []);

myApp.controller('PlayerCtrl',
  function PlayerCtrl($scope,$log, trailers)
  {
     $scope.videos = trailers;
     $scope.playVideo = function(videoId, modeNum){
        alert("video Id = " + videoId + "; mode Num = " + modeNum);
        return false;
     };
  }
);

myApp.directive('tfVideo', function() {
  return{
    restrict: 'AE',
    scope: {
      src: '@',
      handleClick: '&',
      width: '@width',
      height: '@height'
    },
    template: '<a href="#" ng-click="handleClick({videoId: {{src}}, modeId: modeNum{{$parent.$index}} })"><img src="http://img.youtube.com/vi/{{src}}/0.jpg" height="{{height}}" width="{{width}}"/></a>'
  };
});

myApp.factory('trailers', function(){
  var trailerVideos = [
      {
        src:"6kw1UVovByw",
        width:"324",
        height:"300"
      },
      {
        src:"uWgDVz4NEO4",
        width:"324",
        height:"300"
      }
     ];
return trailerVideos;
});
</script>

Thank you

since all you are doing is using directive to generate a template, why do you even need isolated scope? — charlietfl
– charlietfl, Commented Dec 9, 2013 at 23:43

KayakDave · Accepted Answer · 2013-12-10 02:52:39Z

2

1) On your directive declaration:

<tf-video src="{{video.src}}" width="{{video.width}}" handleClick="playVideo(videoId, modeNum)" height="{{video.height}}" title="{{video.title}}"/>

Since attributes use the snake-cased form.

Instead of: handleClick=

You want the snake cased: handle-click=

2) In your template:

 template: '<a href="#" ng-click="handleClick({videoId: {{src}}, modeId: modeNum{{$parent.$index}} })"><img src="http://img.youtube.com/vi/{{src}}/0.jpg" height="{{height}}" width="{{width}}"/></a>'

Instead of: {videoId: {{src}}, modeId: modeNum{{$parent.$index}} }

You want: {videoId: src, modeNum: $parent.$index }

Since you need the "modeNum" parameter name to match between the template and the directive and you want to map directly to the variables, not expressions.

Updated fiddle

answered Dec 10, 2013 at 2:52

KayakDave

24.7k3 gold badges68 silver badges68 bronze badges

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

Collectives™ on Stack Overflow

Accessing controller function in Directive scope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related