4

我正在尝试使用控制器访问图像 src 以保存它，但不知道该怎么做。

我的模板：

    <img data-ng-model="book.image"
         style="width: 300px; height: 200px;"
         ng-src="data:image/png;base64,iVBORw0K...SuQmCC">
    <a data-ng-click="save(book)" class="btn">Submit</a>

我的控制器：

    controller('BookEditController', [ '$scope', '$meteor', function ($scope, $meteor) {
        $scope.save = function (book) {
            if (typeof book == 'object') {
                var books = $meteor("books");
                var id = books.insert(book);
            }
        };
    }])
4

2 回答 2

5

一种选择是使用指令并向其应用名为 save 的方法，该方法将处理图像标签上的src属性。
JS

var app = angular.module('myApp', []);
app.directive('saveImage', function () {
    return {
        transclude: true,
        link: function (s, e, a, c) {
            s.save=function(){
                alert(a.src);
            };
         }
    };
});

HTML

<div >
    <img save-image style="width: 300px; height: 200px;" src="http://placehold.it/350x150"> <a ng-click="save()" class="btn">Submit</a>

</div>

这是在 jsfiddle 中实现的代码。

另一种选择是将范围隔离到控制器，但仍将图像而不是函数应用到控制器。

JS

var app = angular.module('myApp', []);
app.directive('saveImage', function () {
    return {
        transclude: true,
        link: function (s, e, a, c) {
            s.image = a.src;

        }
    };
});

function cntl($scope) {
    $scope.save = function (img) {
        alert($scope.image || 'no image');
    }
}

HTML

<div ng-controller='cntl'>
    <img save-image style="width: 300px; height: 200px;" src="http://placehold.it/350x150"> <a ng-click="save()" class="btn">Submit</a>

</div>

注意添加的 ng-controller="cntl"。

这是那个的 JSfiddle。

于 2013-06-13T19:20:13.687 回答
1

可能有更好的方法来做到这一点......传递$event给您的控制器功能

<a data-ng-click="save(book, $event)" class="btn">Submit</a>

然后使用遍历方法找到img标签及其src属性：

$scope.save = function (book, ev) {
    console.log(angular.element(ev.srcElement).parent().find('img')[0].src);
    ...

更新：更好的方法是创建一个指令（就像@mitch 所做的那样），但我会=在隔离作用域中使用绑定来更新src父作用域中的属性。（=清楚地表明指令可能会改变范围。我认为这比让指令“在幕后”向控制器的范围添加方法或属性更好。）

<div ng-controller="MyCtrl">
    <img save-image book="book1" src="http://placehold.it/350x150" >
    <a href="" ng-click="save(book1)">Submit</a>
</div>


function MyCtrl($scope) {
    $scope.book1 = {title: "book1" };  // src will be added by directive
    $scope.save = function(book) {
        alert(book.title + ' ' + book.src);
    }
}
app.directive('saveImage', function () {
    return {
        scope: { book: '=' },
        link: function (s, e, a, c) {
            s.book.src = a.src;
        }
    };
});

Plunker

于 2013-06-13T18:24:26.420 回答