AngularJS와 지시어 - 바인드 자식 요소

지침AngularJS와 지시어 - 바인드 자식 요소

app.directive('mcAvatar', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      width: '=width', 
      src: '@src' 
     }, 
     templateUrl: 'directives/mc-avatar/mc-avatar.html', 
     link: function (scope, element, attrs) { 
      console.log(element[0]) 
     } 
    }; 
});

템플릿

<img width="{{ width }}" src="{{ src }}" alt="" class="mc-avatar-round">

사용

<mc-avatar width="50" src="http://lorempixel.com/320/320/cats"></mc-avatar>

,451,515,

지시어 반환에있는 링크 기능 내부 element :

만 mg-avatar에 컨텍스트를 제공

<mc-avatar width="50" src="http://lorempixel.com/320/320/cats" class="ng-isolate-scope"> 
    <img width="50" src="http://lorempixel.com/320/320/cats" alt="" class="mc-avatar-round"> 
</mc-avatar>

. 여기 img 요소에 액세스하여 bind 함수를 사용할 수 있습니까?

출처

2017-01-18 CENT1PEDE

console.log (angle.element (element.children() [0]))'은 어떻습니까? –

@DavidR img 요소를 반환하지만'bind'를 사용할 수 없습니다 : /'element.children() [0] .bind가 함수가 아닙니다. ' – CENT1PEDE

try replace : true 옵션 – Sravan

당신은 이벤트를 부착 할 동안 .bind 문을 사용하여 다음 directive에 element.find("img");을 사용할 수 있습니다.

희망이 도움이됩니다!.

출처

2017-01-18 07:54:14

여기에 필요한 코드는,

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 

 
<mc-avatar width="50" src="http://lorempixel.com/320/320/cats"></mc-avatar> 
 

 
<script> 
 
var app = angular.module("myApp", []); 
 
app.directive('mcAvatar', function() { 
 
    return { 
 
     restrict: 'E', 
 
     replace: false, 
 
     scope: { 
 
      width: '=width', 
 
      src: '@src' 
 
     }, 
 
     
 
     template: '<img width="{{ width }}" src="{{ src }}" alt="" class="mc-avatar-round">', 
 
     link: function (scope, element, attrs) { 
 
      console.log(element.find("img")) 
 
     } 
 
    }; 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

스 니펫을 실행하십시오.

Here is a working Demo

출처

2017-01-18 07:46:58 Sravan

AngularJS와 지시어 - 바인드 자식 요소

답변

관련 문제