Image source is not binding with scope variable inside directive

Question

In the below HTML, I want to inject 'src' value from scope variable in controller.

HTML :

<customdir filterby="name" src="imgName"></customdir>

The $scope.imgName variable in controller has the image path.

Javascipt :

var app = angular.module('myApp', []);

app.controller('myCtrl', function ($http, $scope) {

$scope.name = 'ready';
$scope.imgName = '~/Content/arrow-right-xxl.png';

)};

app.directive('customdir', function ($compile) {
var getTemplate = function (filter) {
    switch (filter) {
        case 'ready': return '<div class="col-lg-1" id="ready">' +
                    '<img src={{src}} style="height: 35px; width: 35px; margin-left: 0px; margin-top: 35px" />' +
                '</div>';
        default: return '<input type="text" ng-model="filterby" />';           
    }
}
return {
    restrict: 'E',
    scope: {
        src: '@',
        filterby: "="
    },
    link: function (scope, element, attrs) {
        var el = $compile(getTemplate(scope.filterby))(scope);
        element.replaceWith(el);
    }
};
});

with above code, what is happening? does template renders with `input` element? — Pankaj Parkar, Nov 28 '16 at 04:59
Yes its rendering for input element and its able to bind with **$scope.name** . But not for **imgName** for img element. — Prashanth, Nov 28 '16 at 05:05

score 1 · Accepted Answer · answered Nov 28 '16 at 07:20

Change your directive to this code

app.directive('customdir', function ($compile) {
    var getTemplate = function (filter, src) {
        switch (filter) {
            case 'ready': return '<div class="col-lg-1" id="ready">' +
                        '<img src='+src+' style="height: 35px; width: 35px; margin-left: 0px; margin-top: 35px" />' +
                    '</div>';
            default: return '<input type="text" ng-model="filterby" />';           
        }
    }
    return {
        restrict: 'E',
        scope: {
            src: '=',
            filterby: "="
        },
        link: function (scope, element, attrs) {
            var el = $compile(getTemplate(scope.filterby, scope.src))(scope);
            element.replaceWith(el);
        }
    };
});

Passing scope.filterby and scope.src direct to your directive.

Perfectly worked !! Can you explain me whats the difference in '@' and '=' of scope variables? — Prashanth, Nov 28 '16 at 08:08
you can get the answer here http://stackoverflow.com/a/14063373/1572987 — errorare, Nov 28 '16 at 08:34

score 0 · Answer 2 · answered Nov 28 '16 at 06:52

Pass the value of imgName like below, as you are using @ for src attribute of your directive.

HTML :

<customdir filterby="name" src="{{imgName}}"></customdir>

Use ng-src in the img tag like below:

Javascript:

var getTemplate = function (filter) {
    switch (filter) {
        case 'ready': return '<div class="col-lg-1" id="ready">' +
                '<img ng-src="{{src}}" style="height: 35px; width: 35px; margin-left: 0px; margin-top: 35px" />' +
                '</div>';
        default: return '<input type="text" ng-model="filterby" />';           
    }
}

score -1 · Answer 3 · answered Nov 28 '16 at 04:48

-1

Try this

<customdir filterby="name" ng-src="imgName"></customdir>

answered Nov 28 '16 at 04:48

Sujithrao

789
3
12
27

Thanks Sujithrao, I've tried this already. It's not working ! – Prashanth Nov 28 '16 at 04:56
Its showing "Failed to load resource" if I do like the same above ! – Prashanth Nov 28 '16 at 05:12

Image source is not binding with scope variable inside directive

3 Answers3