AngularJS - ディスプレイの画像ディレクティブを使用して

Question

イメージは定数

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

指令

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

• イメージURLとファイル名を定数ファイルに設定しました。どうすればいいですか イメージパスと名前を動的に追加する指示文に渡しますので、 上記の指示文を使用して表示されますか？

画像パスと名前の設定ファイルを用意し、HTMLで完全絶対パスの代わりにng-src="{{src}}"だけを渡すようにします。

Answer 1

あなたのディレクティブにimageConstant依存関係を追加し、あなたが行ってもいいです、次のように：あなたのディレクティブに

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

Answer 2

あなたが任意の他の角度のプロバイダのようなあなたの定数を注入することができますモジュール依存としてapp-configを追加します。

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

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

その後、HTML上のstreaming-logoからlinker機能HTMLで次に

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

注

変更streamingLogoに

Answer 3

を注入imageConstant：

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

Answer 4

あなたがする必要がありますあなたは、生産のためのあなたのJavaScriptファイルをminifeyしたい場合は他の方法（check this）であなたの依存関係を注入する必要があなたのディレクティブ

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

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


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

通知の依存関係として定数を注入。

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

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



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

Answer 5

あなたは.directive関数にimageConstantを注入する必要があります。

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

HTMLコードに小さな変化：

使用streaming-logo代わりにstreamingLogo。

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