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

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

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

Answer 2

將imageConstant注入到指令中，並將app-config添加為模塊依賴項。

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

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

然后在linker功能

然后用HTML

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

注意

更改streamingLogo到streaming-logo上的HTML

Answer 3

您可以像其他任何角度提供程序一樣注入常量：

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 4

您必須將常量作為指令的依賴項注入

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

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


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

請注意，如果要最小化用於生產的javascript文件，則需要以其他方式注入依賴項（ 選中此選項 ）。

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

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



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

Answer 5

您需要將imageConstant注入.directive函數。

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