我正在尝试使用控制器访问图像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);
}
};
}])
答案 0 :(得分:5)
一个选项是使用directive并将一个名为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>
This is the code implemented in 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”。
答案 1 :(得分:1)
这可能是更好的方法......将$event
传递给您的控制器功能
<a data-ng-click="save(book, $event)" class="btn">Submit</a>
然后使用遍历方法查找img
标记及其src
attr:
$scope.save = function (book, ev) {
console.log(angular.element(ev.srcElement).parent().find('img')[0].src);
...
更新:更好的方法是创建一个指令(比如@mitch),但是我会在隔离范围中使用=
绑定来更新src
属性在父范围内。 (=
清楚地表明该指令可能会改变范围。我认为这比指令在控制器的范围内添加方法或属性更好(#34;在幕后&#34; ;)
<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;
}
};
});