2017-06-15 44 views
-1

我正在用相當的Angular指令替換MVC HtmlHelper。該幫助程序基於幾個參數呈現Font Awesome圖標。這適用於某一點,但第三個參數始終爲零。Angular指令 - 第三個參數始終爲零

標記:

<subscription-product-icon productid="p.ProductID" productname="p.ProductName" additionalclass="fa-lg"></subscription-product-icon> 

指令:

(function() { 
    'use strict'; 

    angular.module('app', []) 
     .directive('subscriptionProductIcon', function() { 

      var getTemplate = function (productid, productname, additionalclass) { 
       var iconClass = additionalclass; 
       debugger 
       switch (productid) { 
        case 1: 
         iconClass += " fa-circle-o-notch free-subscription"; 
         break; 
        case 2: 
         iconClass += " fa-circle-o-notch standard-subscription"; 
         break; 
        case 3: 
         iconClass += " fa-calendar live-availability"; 
         break; 
        default: 
         iconClass += " fa-question text-red"; 
         break; 
       } 

       return "<i class='fa " + iconClass + "' title='" + productname + "' aria-hidden='True'></i>"; 
      }; 

      return { 
       restrict: "E", 
       scope: { 
        productid: "=", 
        productname: "=", 
        additionalclass: "=" 
       }, 
       link: function (scope, element, attrs) { 
        element.html(getTemplate(scope.productid, scope.productname, scope.additionalclass)); 
        console.log("test", scope.productid); 
       } 
      }; 

     }); 
})(); 

雖然前兩個parmeters正常工作,所述第三參數

additionalclass

始終爲零。誰能解釋爲什麼?

這是我第一次使用Angular btw的Angular指令,所以我不是專家!

回答

1

這裏的問題是,你已經在指令中定義了additionalClass attr作爲雙向綁定"="然後你試圖傳遞一個常量字符串而不是變量。

FIX-

  1. 變化"=""@"爲additionalClass ATTR

  2. 傳遞一個變量additionalClass ATTR同另外兩個

檢查這個plunker看到它在行動

希望這會有所幫助