AngularJs directive - bind child element

Question

Directive

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])
        }
    };
});

Template

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

Usage

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

The element inside the link function in the directive returns :

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

which gives the the context to mg-avatar only. How do I access the img element here so that I could use bind functions?

How about `console.log(angular.element(element.children()[0]))` ? — David R, Jan 18 '17 at 07:37
@DavidR it returns the img element, but I cannot use `bind` :/ `element.children()[0].bind is not a function` — jofftiquez, Jan 18 '17 at 07:40
@TheGreenFoxx In that case, can you try `element.find("img");` and then try setting your `bind` over it? — David R, Jan 18 '17 at 07:41
@TheGreenFoxx In either case, store it in a `var` and then try your `bind` statement — David R, Jan 18 '17 at 07:42
@Sravan - generated a error @DavidR `element.find("img");` did work thanks :) Can you post your answer so others will benefit from it in the future? Thanks. — jofftiquez, Jan 18 '17 at 07:46

score 1 · Answer 1 · edited Jan 18 '17 at 07:52

Here is your required code,

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

Please run the snippet.

Here is a working Demo

score 1 · Accepted Answer · answered Jan 18 '17 at 07:54

1

You can use element.find("img"); in your directive and then use the .bind statement over it to attach events.

Hope this helps!.

answered Jan 18 '17 at 07:54

David R

14,711
7
54
72

AngularJs directive - bind child element

2 Answers2