Question

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

在我写的html里面（在玉中）

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

我做错了什么？

Answer 1

如果您想在指令的模板中使用该功能，则应使用onChange: '&'，如果您只想将该功能传递到指令的范围，请使用onChange: '='。

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

Answer 2

要实现目标，您必须在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

上的文档

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

希望这有帮助。

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

2 个答案: