CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Slimshadddyyy
Slimshadddyyy

Reputation: 4081

AngularJS - Display image using directive

Image Constants

angular.module('app-config', []).constant('imageConstant',
    {
        logoPath: 'assets/img/logo/',
        faviconPath: 'assets/img/favicon/',
        layoutPath: 'assets/img/layout/',
        logoFileName: 'myLogo.png'
    });

Directive

myApp.directive("streamingLogo", function () {

    var linker = function (scope, element, attrs) {

    //pass image constants here to append image url
    //for ex: src = imageConstant.logoPath + imageConstant.logoFileName;

    };
    return {
        restrict: "A",
        link: linker
    };
});

HTML

<img class="my-logo" id="my-logo" ng-src="{{src}}" streamingLogo/>

The idea is to have a configuration file for image path and names so that in HTML, only ng-src="{{src}}" is passed instead of full absolute path.

Upvotes: 0

Views: 1849

Answers (5)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27242

You need to inject the imageConstant into the .directive function.

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

myApp.directive("streamingLogo", ['imageConstant', function(imageConstant) {
   return {
       restrict: "A",
       link: function (scope, elem, attrs) {
         scope.logoPath = imageConstant.logoPath; 
         scope.favIconPath = imageConstant.faviconPath;
         scope.layoutPath = imageConstant.layoutPath;
         scope.logoFileName = imageConstant.logoFileName;
       }
   };
}]);

small change in Html code :

use streaming-logo instead of streamingLogo.

<img class="my-logo" id="my-logo" src="{{logoPath}}" streaming-logo/>

Upvotes: 0

Ravi Teja
Ravi Teja

Reputation: 1107

Inject imageConstant to your directive and add app-config as module dependency.

myApp.directive("streamingLogo", function (imageConstant) {

    var linker = function (scope, element, attrs) {
      scope.src= imageConstant.logoPath;
    };
    return {
        restrict: "A",
        link: linker
    };
});

then in linker function

Then in HTML

<img class="my-logo" id="my-logo" ng-src="{{src}}" streaming-logo/>

Note

Change streamingLogo to streaming-logo on HTML

Upvotes: 1

Ahmad Abu Saa
Ahmad Abu Saa

Reputation: 818

you have to inject constants as dependency for your directive

myApp.directive("streamingLogo", function (imageConstant) {

     var linker = function (scope, element, attrs) {


    };
    return {
        restrict: "A",
        link: linker
    };
});

notice that you need to inject your dependencies in other ways (check this) if you want to minifey your javascript files for production.

myApp.directive("streamingLogo", ['imageConstant',function (imageConstant) {

     var linker = function (scope, element, attrs) {



    };
    return {
        restrict: "A",
        link: linker
    };
}]);

Upvotes: 0

nikjohn
nikjohn

Reputation: 21918

You can inject your constant like any other angular provider:

myApp.directive("streamingLogo", ['imageConstant', function (imageConstant) {

var linker = function (scope, element, attrs) {

console.log(imageConstant.logoPath);
console.log(imageConstant.faviconPath);
console.log(imageConstant.layoutPath);
};
return {
    restrict: "A",
    link: linker
};
}]);

Upvotes: 0

illeb
illeb

Reputation: 2947

Add imageConstant dependency to your directive and you are good to go, like this:

myApp.directive("streamingLogo", ['imageConstant', function(imageConstant) {
   var linker = function (scope, element, attrs) {

       scope.logoPath = imageConstant.logoPath; 
       scope.favIconPath = imageConstant.faviconPath;
       scope.layoutPath = imageConstant.layoutPath;
       scope.logoFileName = imageConstant.logoFileName;

   };
   return {
       restrict: "A",
       link: linker
   };
}]);

Upvotes: 1

Related Questions