如何在ng-click上将指令元素作为参数传递

Question

所以我知道$event.target将包含dom元素，但我的情况却大不相同...

我有一个名为change-image的自定义指令，可用于动态更改图像...

这是我的指令代码...

app.directive('changeImage', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {
            element.on('click', function ($event) {
                var imgElem = $event.target;
                console.log(imgElem);
                $event.stopPropagation();
                var form = '<div class="form-group"><label for="image">Choose Image</label><input type="hidden" ><input id="inputImage" name="image" type="file" accept="image/*" image="image" class="form-control"><img ng-src="{{image.url || \'http://placehold.it/350x350.jpg\' }}" type="{{image.file.type}}" class="form-control"><button class="form-control" id="change-image-btn" ng-click="uploadPic(image, imgElem)">Add</button>';
                form = $.parseHTML(form);
                $('#change-form').html($compile(form)($scope));
            });
        },
        replace: true
    };
}]);

如您在单击指令时看到的那样，我正在创建一些带字符串的html并将其保存到变量“ form”中，然后在将其附加到div中之前将其解析为html。

因此请注意，在此字符串html中，我有一个带有ng-click指令的按钮。 在这里，我传递了来自角度图像上传对象的图像...，我还想传递触发更改图像onclick的元素...

var imgElem具有当前图像dom，在对其进行控制台时可以看到它。 但是在将此imgElem传递给ng-click时，该元素的uploadPic()函数上的参数始终未定义。 image参数确实指向单击按钮后得到的图像对象。

我尝试通过将ng-click编写为直接使用变量

ng-click=uploadPic(image, ' + imgElem + ');

但是它显示了解析错误，我想这是预期的...

那这里到底是什么？ 我可以获取图像对象，但是element参数始终是未定义的，并且不指向指令元素...

我该如何将此元素传递给uploadPic()函数...请提供帮助...

Answer 1

您要传递的变量应该在控制器中定义，因为html附加到父DOM上，指令内部的变量变得未定义，以便这样做，因此您可以在控制器中创建一个对象，并将其作为参数传递给使用范围的指令，然后您将能够观察到变化。

 app.controller('MainCtrl', function ($scope) {
        $scope.test= {};
        $scope.test.valuetouse=undefined;
    });
app.directive('changeImage', ['$compile', function ($compile) {
return {
    scope:true,
    restrict: 'A',
    link: function ($scope, element, attrs) {
        element.on('click', function ($event) {
            test.valuetouse = $event.target;
            console.log(imgElem);
            $event.stopPropagation();
            var form = '<div class="form-group"><label for="image">Choose Image</label><input type="hidden" ><input id="inputImage" name="image" type="file" accept="image/*" image="image" class="form-control"><img ng-src="{{image.url || \'http://placehold.it/350x350.jpg\' }}" type="{{image.file.type}}" class="form-control"><button class="form-control" id="change-image-btn" ng-click="uploadPic(image, imgElem)">Add</button>';
            form = $.parseHTML(form);
            $('#change-form').html($compile(form)($scope));
        });
    },
    replace: true
};

}]）;