安格拉斯。从AngularJS控制器访问属性

我试图通过控制器访问图像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>

---

也许有更好的方法来做到这一点。。。将

$event

传递给控制器功能

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

---

Update：更好的方法是创建一个指令（如@mitch-did），但我会在隔离作用域中使用

=

绑定来更新父作用域中的

src

属性。（

=

明确说明指令可能会改变作用域。我认为这比让指令“幕后”向控制器的作用域添加方法或属性要好。）

一个选项是使用并应用一个名为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);
            };
         }
    };
});

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

</div>

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

HTML

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

</div>

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

您会有多个这样的图像吗？只有一个base64编码图像。您如何设置
ng src
是静态数据还是它是
ng repeat
的一部分？或者？我正在通过onchange事件从输入[文件]中直接加载它（这是我的指令）更详细的html模板代码：我要评论的唯一一件事是，将任何DOM操作放在控制器中被认为不是一个好的实践。请看Mark Rajcok上的“正确使用控制器”一节，我想找到一个优雅而简单的解决方案。但你的解决方案是有效的。Mitch，也许有一种解决方案可以将src属性镜像到隐藏的输入值中（使用指令或类似的东西）？或者这不是正确的决定？谢谢@mitch，我太懒了。我应该提到的是，即使是在控制器中检查DOM结构也不受欢迎。我喜欢你的答案（+1），但我会使用带有
=
的隔离作用域，如我更新的答案所示。我有一个习惯，就是直接在脚本中使用DOM，所以现在我不太容易接受再培训。谢谢你非常详细的回答。我将尝试实现您的一个选项。@Serg没问题！第二个示例在对$scope.image执行任何操作之前进行检查以确保它存在。在您的示例中，src属性将成为book对象的一部分：
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');
    }
}

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