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>

element внутри функция связи в возвращениях директивы:

<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>

, который дает контекст только mg-avatar. Как мне получить доступ к элементу img здесь, чтобы я мог использовать функции bind?

источник

2017-01-18 CENT1PEDE

Как насчет 'console.log (angular.element (element.children() [0]))'? –

@DavidR возвращает элемент img, но я не могу использовать 'bind': /' element.children() [0] .bind не является функцией' – CENT1PEDE

try 'replace: true' option – Sravan

Вы можете использовать element.find("img"); в вашем directive, а затем использовать .bind заявление по этому приложить события.

Надеюсь, что это поможет !.

источник

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 директива - привязать дочерний элемент

ответ

Смежные вопросы