반응형
angularjs - ng-src 내에서 {{}} 바인딩을 사용하지만 ng-src가 로드되지 않음
img HTML 요소의 ng-src에 값을 바인드하려고 했지만 소용이 없었습니다.
HTML 코드:
<div ng-controller='footerCtrl'>
<a href="#"><img ng-src="{{avatar_url}}"/></a>
</div>
AngularJS 코드:
app.controller('footerCtrl',function($scope, userServices)
{
$scope.avatar_url='';
$scope.$on('updateAvatar', function()
{$scope.avatar_url = userServices.getAvatar_url();}
);
}
app.factory('userServices', function($rootScope){
var avatar_url='';
return{ setAvatar_url: function(newAvatar_url)
{ avatar_url = newAvatar_url; $rootScope.$broadcast('updateAvatar');}}
);
varatar_url 변수를 업데이트하고 싶습니다.ng-src사용자 서비스의 해당 변수(avatar_url)가 업데이트될 때마다 표시됩니다.사용자 서비스의 변수는 http를 통해 업데이트됩니다.서버에 대한 POST 요구.서버로부터의 응답으로 사용자 서비스의 변수가 갱신되는 것을 확인했습니다.이 변수는 다음 varatar_url 변수에 브로드캐스트 됩니다.footerCtrl.
그러나 이미지 요소 HTML은 변경 사항을 전혀 반영하지 않습니다.사실, 저는 또한 제 페이지의 사진 중 하나에 대한 상대 경로로 아바타_url 변수를 사전 설정하려고 했지만, 이미지에는 아무것도 표시되지 않습니다(ng-).src값이 비어 있습니다).t
의 변경ng-src값은 실제로 매우 단순합니다.다음과 같이 합니다.
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<img ng-src="{{img_url}}">
<button ng-click="img_url = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'">Click</button>
</body>
</html>
다음은 작업 예시의 jsFiddle입니다.http://jsfiddle.net/Hx7B9/2/
사용할 수 있습니다.ng-src하지만 언제ng-src's value되었다null,''또는undefined,ng-src동작하지 않습니다.그러니까 그냥 사용하세요ng-if이 경우:
http://jsfiddle.net/Hx7B9/299/
<div ng-app>
<div ng-controller="AppCtrl">
<a href='#'><img ng-src="{{link}}" ng-if="!!link"/></a>
<button ng-click="changeLink()">Change Image</button>
</div>
</div>
언급URL : https://stackoverflow.com/questions/16394578/angularjs-using-binding-inside-ng-src-but-ng-src-doesnt-load
반응형
'source' 카테고리의 다른 글
| Jackson @JsonFormat 설정 날짜를 하루 미만으로 설정 (0) | 2023.03.15 |
|---|---|
| spring-boot-starter-test with JUnit 5 (0) | 2023.03.15 |
| spring.cloud.config.enabled를 통해 스프링 클라우드 구성을 해제할 수 없음: false (0) | 2023.03.10 |
| React에서 후크를 사용하여 이벤트 핸들러를 만드는 올바른 방법입니까? (0) | 2023.03.10 |
| 애플리케이션 속성을 정의되지 않음/설정 취소로 재정의합니다. (0) | 2023.03.10 |