Директива 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 функции?

Источник

2 ответа

Решение

Ты можешь использовать element.find("img"); в вашем directive а затем использовать .bind Заявление над ним, чтобы прикрепить события.

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

Источник

Вот ваш необходимый код,

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

Пожалуйста, запустите фрагмент.

Вот рабочая демка

Источник
Другие вопросы по тегам