Question

我试图从嵌套在另一个指令中的指令访问控制器作用域中定义的函数。我正在使用“＆amp;”并将函数名称作为属性传递给指令，但是我仍然无法访问控制器范围中的函数。

有人可以纠正我错的地方吗？我花了几个小时试图发现我必须使用“＆amp;”达到控制器范围，但在我做了之后就停留在这里。

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

代码：

<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>

谢谢

Answer 1

1）在您的指令声明中：

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

由于属性使用蛇形表格。

而不是：handleClick=

你想要蛇被套：handle-click=

2）在你的模板中：

 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>'

而不是：{videoId: {{src}}, modeId: modeNum{{$parent.$index}} }

您想：{videoId: src, modeNum: $parent.$index }

由于您需要“modeNum”参数名称以匹配模板和指令，并且您希望直接映射到变量，而不是表达式。

Updated fiddle

在指令范围内访问控制器功能

1 个答案: