반응형
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');}}
);
ng-src사용자 서비스의 해당 변수 (avatar_url)가 업데이트 될 때마다 avatar_url 변수를 업데이트하고 싶습니다 . 사용자 서비스의 변수는 서버에 대한 http.POST 요청을 통해 업데이트됩니다. 서버의 응답이 사용자 서비스의 변수를 업데이트 한 다음 .NET Framework의 avatar_url 변수로 브로드 캐스트되는지 확인했습니다 footerCtrl.
그러나 이미지 요소 HTML은 변경 사항을 전혀 반영하지 않습니다. 사실, 내 페이지에있는 사진 중 하나에 대한 상대 경로에 avatar_url 변수를 사전 설정하려고 시도했지만 이미지에는 여전히 아무것도 표시되지 않습니다 (ng- src값이 비어 있음). 티
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>
반응형
'IT Share you' 카테고리의 다른 글
| MySQL에서 함수 기반 인덱스를 가질 수 있습니까? (0) | 2021.01.07 |
|---|---|
| jQuery 클릭 이벤트에서 false 반환 (0) | 2021.01.07 |
| 루프 변수가없는 C ++ 11 범위 기반 for 루프 (0) | 2021.01.07 |
| Haskell의 DataKinds 확장은 무엇입니까? (0) | 2021.01.07 |
| Asp.Net Identity DataBase 첫 번째 접근 방식 사용 (0) | 2021.01.07 |