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'，然后我将其解析为html，然后将其附加到div中。

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

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

我尝试通过将ng-click写为

来直接使用变量

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

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

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

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

Answer 1

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

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

}]）;

如何在ng-click

1 个答案: