각도 이해JS ng-src
여기서 설명한 바와 같이 Angular는JS 디렉티브 ng-src는 핸들바가 해석되기 전에 브라우저가 자원(예를 들어 이미지)을 로드하지 않도록 하기 위해 사용됩니다.현재 사용하고 있는 코드는 다음과 같습니다.
<div ng-controller="MyCtrl">
<img ng-src="http://localhost:8081/media/{{ path }}" />
</div>
다음 JavaScript 사용 시:
function MyCtrl($scope, $timeout) {
$timeout(function () {
$scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png';
}, 1000);
};
웹 서비스에서 경로를 검색하는 중입니다.이 지연으로 인해 브라우저는 로드를 시도합니다.http://localhost:8081/media/
404의 원인이 됩니다.경로가 취득되면 브라우저는 올바른 요청을 발행하고 이미지를 로드합니다.
모든 데이터가 준비될 때까지 리소스를 로드하지 않도록 하려면 어떤 방법이 권장됩니까?
예를 들어 jsfiddle을 참조해 주십시오.
경로 전체를 $scope 변수 안에 넣습니다.그와 같이ng-src
는 이미지에 대한 완전한 해결 경로를 제공할 때까지 기다립니다.
<div ng-controller="MyCtrl">
<img ng-src="{{ path }}" />
</div>
function MyCtrl($scope, $timeout) {
var path = 'https://si0.twimg.com/profile_images/';
$timeout(function () {
$scope.path = path + '2149314222/square.png';
}, 1000);
};
예에 의한 정보
이거 가져가자blogitem directive
위의 예에서는 이미 기본값을 설정하는 방법을 보여 줍니다.
HTML:
<blogitem ng-repeat="item in items"
bg-src="{{ item.image }}"
caption="{{ item.title }}"/>
JS:
.directive( 'blogitem', function()
{
return {
restrict : 'E',
templateUrl : 'js/app/directives/blogitem.html',
replace : true,
// pass these two names from attrs into the template scope
scope : {
intro : '@',
bgSrc : '@'
}
}
} )
HTML 템플릿:
<article>
<img ng-src="{{ bgSrc }}"/>
<p>{{ intro }}</p>
</article>
이 정보가 다음 정보를 이해하는데 도움이 되었으면 합니다.ng-src
.
저도 같은 이슈에 부딪혔어요.한 가지 주의할 점은 ng-src 값이 정의되지 않은 경우 img가 Import되지 않는다는 것입니다.따라서 두 개의 인수를 조합하여 두 개의 인수가 모두 정의된 경우에만 값을 반환하는 유틸리티 메서드를 만들었습니다.이하를 참조해 주세요.
<div ng-controller="MyCtrl">
<img ng-src="{{MyUtil.strConcat('http://localhost:8081/media/', path)}}" />
</div>
myApp.factory('MyUtil', function() {
return {
strConcat: function(str1, str2) {
return (angular.isDefined(str1) && angular.isDefined(str2)) ?
(str1 + str2) : undefined;
}
}
});
function MyCtrl($scope, $timeout, MyUtil) {
$scope.MyUtil = MyUtil;
...
}
를 설정할 수 있습니다.ng-src
데이터가 아직 입력되지 않은 경우 빈 문자열로 이동합니다.
<div ng-controller="MyCtrl">
<img data-ng-src="{{ path && 'http://localhost:8081/media/'+path || '' }}" />
</div>
언제path
초기화되지 않은 상태에서는 단락이 발생하여or
분할하여 설정data-ng-src
로.''
(빈 문자열), 따라서 서버에 히트하지 않습니다.
최근에는 다음과 같이 평가할 수 있습니다.
ng-src="{{ methodThatReturnsString() }}"
나는 100% 효과가 있다고 확신한다.
먼저 다음과 같이 쿼리를 작성해야 합니다.
select (select '../Images/'|| T_LANG2_NAME ||'.png' T_LANG2_NAME from T04222_T where T_LOG_ID = T04220.T_C_STATUS) TIMER from T04220
where T_PAT_NO = '89004331' group by T_C_STATUS
having max(T_ARRIVAL_DATE) = (select max(T_ARRIVAL_DATE) from T04220 where T_PAT_NO = '89004331');) then you write Code for Controller like this ( if (scope.T_PAT_NO) {
debugger;
$http({
method: 'POST',
url: '/T04205/GetTimerImage',
data: JSON.stringify({ PatientCode: scope.T_PAT_NO })
}).
success(function (data) {
debugger;
var newDataJSON = JSON.parse(data);
scope.TIMER = newDataJSON[0].TIMER;
});
그러면 이렇게 html 코드
<input id="imTimer" type="image" src="{{TIMER}}" style="width: 80px;height: 80px" />
언급URL : https://stackoverflow.com/questions/18235169/understanding-angularjs-ng-src
'programing' 카테고리의 다른 글
열거를 문자열로 직렬화 (0) | 2023.04.06 |
---|---|
Spring-Data-MongoDB를 취득하여 오브젝트를 검증하려면 어떻게 해야 합니까? (0) | 2023.04.06 |
React에서 화면 크기가 모바일로 변경되었는지 감지하는 방법 (0) | 2023.04.06 |
POST: URL 자체에서 POST 요청 전송 (0) | 2023.04.06 |
빈에 이미 @ConfigurationProperties 주석이 붙어 있는 경우 @EnableConfigurationProperties는 어떤 차이가 있습니까? (0) | 2023.04.06 |