반응형
ng-src에서 함수를 호출하는 방법
이미지의 소스를 동적으로 불러오는 코드를 실행하려면 함수를 호출할 수 있어야 합니다.다음 코드 스니펫은 내가 원하는 것의 예를 보여줍니다.
<!-- "myFunction" exists in the current scope -->
<img ng-src="myFunction()" />
간단해야 하는데 ng-src 문서에는 아무것도 없어요!누가 이걸 때린 적 있어?
잘 부탁드립니다!
지침(답변을 기반으로 한 예)
다른 이들은 지시를 권고했다.클라이언트 코드를 투고할 수 없기 때문에, 플런커로 표시되는 간단한 예를 작성했습니다(여기를 참조).핵심 지시문은 다음과 같습니다.
app.directive("imageSource", function (){
return { link: function (scope, element, attrs){
element.attr("src", scope.imageUrlArray[attrs.imageSource]);
}
};
});
예를 들어 ng-src의 변수를 사용하여 ng-repeat을 수행할 수 있다는 것을 알고 있습니다만, 이것이 필요한 경우 지시문이 어떻게 표시되는지 보여주는 예입니다.
<img ng-src="{{myFunction()}}" />
그래, 결국엔 거기까지 갔지
JavaScript:
angular.module('MyApp', [])
.controller('Ctrl2', function($scope) {
})
.directive('mySrc', function() {
return {
restrict: 'A',
link: function ( scope, elem, attrs ) {
//replace test with whatever myFunction() does
elem.attr('src', 'test1');
}
};
});
HTML:
<div ng-app="MyApp">
<div ng-controller="Ctrl2">
<img my-src />
</div>
</div>
만지작거리다
커스텀 디렉티브에 인수로서 myFunction을 넘기는 것이 좋지 않을까요?이렇게 하면 두 가지 기능을 분리할 수 있으며, 앞으로 어떤 기능을 통과시킬지 쉽게 변경할 수 있습니다.
HTML
<body ng-app='testApp'>
<div ng-controller='TestCtrl'>
<img my-src callback='myFunction()' />
</div>
</body>
JS:
angular.module('testApp', [])
.controller('TestCtrl', function($scope) {
$scope.myFunction = function() {
return 'http://nodejs.org/images/roadshow-promo.png';
}
})
.directive('mySrc', function() {
return {
restrict: 'A',
scope: {
callback: '&'
},
link: function ( scope, elem, attrs ) {
elem.attr('src', scope.callback());
}
};
})
언급URL : https://stackoverflow.com/questions/22225609/how-to-call-a-function-in-ng-src
반응형
'programing' 카테고리의 다른 글
| php 파일에서 Google Chart API(Javascript) 실행 (0) | 2023.03.17 |
|---|---|
| @ConfigurationProperties 및 @Autowired 클래스를 테스트하는 방법 (0) | 2023.03.17 |
| JSON 데이터 유형 postgres별 순서 (0) | 2023.03.17 |
| jquery AJAX 성공 콜백에서 기능하도록 변수 전달 (0) | 2023.03.17 |
| jquery window.open in ajax 성공 차단 (0) | 2023.03.17 |