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

Question

我有一个指令（显示 youtube 视频），它应该将函数作为属性，以便能够在链接函数中启动它。

在我写的html里面（用jade）

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

我的控制器和指令如下所示

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 开发控制台中，我只能看到 state changed to 行，但看不到 launched from controller! 行通过 id 和 state。

我做错了什么？

Answer 1

要实现你的目标，你必须在 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 来完成。例如，如果表达式是 increment(amount)，那么我们可以通过调用 localFn 来指定数量值 localFn({amount: 22})。

希望这会有所帮助。

Answer 2

当你想在你的指令模板中使用函数时，你应该使用onChange: '&'，如果你只是想将函数传递给指令的范围，使用onChange: '='。

& 绑定允许指令在特定时间触发原始作用域上下文中的表达式求值。允许任何合法表达式，包括包含函数调用的表达式。因此，& 绑定非常适合将回调函数绑定到指令行为。