将一个函数传递给一个指令，然后用参数调用它

我有一个指令（显示YouTube视频），它应该把一个函数作为一个属性，以便能够在链接函数中启动它。将一个函数传递给一个指令，然后用参数调用它

我（玉）

div(ng-controller="videoPageCtrl") 
    ... 
    div(my-youtube,id='aaa',url='KEHxHr-Ih9w',on-change="doEventsOnChange")

我的控制和指导的样子写的HTML中如下

app 
.directive('myYoutube', function($sce, $timeout) { 
    return { 
     restrict: 'A', 
     scope: { 
      url: '@', 
      id: '@', 
      onChange: '&', 
     }, 
     link: function(scope) { 
      $timeout(function() { 
       scope.player = new YT.Player(scope.id, { 
        videoId: scope.url, 
        events: { 
         'onStateChange': function(state) { 
          console.log('state changed to', state, scope.id, scope.onChange); 
          scope.onChange(state, scope.id); 
         } 
        } 
       }); 
      }, 5000); 
     } 
    }; 
}) 
.controller('videoPageCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) { 
    $scope.doEventsOnChange = function(state, id) { 
     console.log(id, state, 'launched from controller!'); 
    }; 
}]);

的问题是，我无法通过id和state和火起来的doEventsOnChange功能。结果在chrome dev控制台中，我只能看到state changed to行，但没有launched from controller!行通过id和state。

我在做什么错？

来源

2016-03-15 kaytrance

如果您只想将函数传递给指令的作用域，那么当您要在指令的模板中使用该函数时，应该使用onChange: '&';如果您只想将该函数传递给指令的作用域，请使用onChange: '='。

&绑定允许指令在特定时间在原始范围的上下文中触发对表达式的评估。任何法律表达都是允许的，包括一个包含函数调用的表达式。因此，&绑定非常适合将绑定回调函数绑定到指令行为。

来源

2016-03-15 08:06:31

因此，如果我的指令中有模板，我应该使用'＆'？ – kaytrance

如果您的指令中有一个模板，并且您想从中调用该模板，那么可以在这里指出一个ng-click，是的。如果您只是想在指令的控制器中使用它，请使用'=' –

@MartijnWelker ..通过为指令创建一个隔离范围，范围不一样。所以指令和控制器没有使用相同的范围。通过使用“=”，您只需将父作用域的函数（模型）绑定到子作用域的模型:)。它当然会起作用，但我认为并且会更合适。这是因为对于永远不会改变的函数（在控制器或指令中）的两种方式绑定不是很合适。使用和引用该函数是一个更好的选择。 – AhsanAyaz

为了实现自己的目标，你必须传递参数时，用这句话在HTML

div(my-youtube,id='aaa',url='KEHxHr-Ih9w',on-change="doEventsOnChange(state,id)")

，并在你的指令，：

console.log('state changed to', state, scope.id, scope.onChange); 
scope.onChange({state: state,id:scope.id});

查看enter link description here

文档

&或& attr - 提供了一种在父范围的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。鉴于以及隔离范围定义范围{localFn：'& myAttr'}，隔离范围属性localFn将指向count = count + value表达式的函数包装。通常希望通过表达式将数据从隔离范围传递到父范围。这可以通过将局部变量名称和值的映射传递到表达式包装函数fn来完成。例如，如果表达式是增量（金额），那么我们可以通过调用localFn作为localFn（{amount：22}）来指定金额值。

希望这会有所帮助。

来源

2016-03-15 08:33:26 AhsanAyaz

将一个函数传递给一个指令，然后用参数调用它

回答

相关问题