Angularjs. AngularJS 컨트롤러에서 속성에 액세스하기

Question

컨트롤러를 사용하여 이미지 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> 

내 컨트롤러 :

이

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

다음 컨트롤러 기능에 $event을 통과 ... 아마이 할 수있는 더 좋은 방법이있다

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

Answer 1

하나의 옵션은 SRC를 처리 할 것입니다 그것을 저장라는 메소드를 directive을 사용하고 적용하다 속성이 이미지 태그에서 발견되었습니다.
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 제어기 = "CNTL".

This is the JSfiddle for that one.

Answer 2

탐색 방법을 사용하여 img 태그와 해당를 찾으십시오.ATTR :

$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