角度自定義屬性指令應替換為另一個指令

Question

我試圖為類似src的屬性實現自定義屬性指令，該指令應表示目錄的相對路徑。

目錄的路徑在全局變量中（例如mydir）。

該屬性應替換為帶有目錄路徑的ng-src。

我想這樣使用它：

<md-icon my-src="cake.svg"></md-icon>
<md-icon my-src="{{ anExpression }}"></md-icon>
<md-icon my-src="{{::onTimeBinding}}"></md-icon>

我還希望支持這一功能，而不僅限於使用angulat材料。

謝謝您的幫助！

編輯：

對不起，我沒有很好地解釋自己。 我想支持在所有類型的元素中使用mySrc指令。 應該用基本目錄替換為ng-src。 我創建了一個插件，但是它不起作用。 到目前為止，代碼看起來像這樣：

app.directive("mySrc", function() {

  return {
    restrict: "A",
    compile: function(element, attrs) {

      return {
        pre: function(scope, element, attributes) {
          var baseUrl = 'http://dummyimage.com/';
          attributes.$set("ng-src", baseUrl + attributes.mySrc);
        }
      }

    }
  }
});

使用示例：

<img my-src="100" />
<img my-src="{{ expr }}" />
<img my-src="{{:: oneTimeExpr }}" />

對我們來說，支持最后兩個選項也很重要。

Answer 1

您的指令實際上有效，但是您的方法略有偏離。 您不想將my-src更改為ng-src ，因為ng-src是執行與您嘗試執行的操作類似的指令。 您實際要做的是將my-src更改為src ，以便瀏覽器可以實際呈現標記。

換句話說， attributes.$set("src", baseUrl + attributes.mySrc); 做你想要的。 但是，它不是動態的。

取自ng-src的源代碼 ，您可以使用$observe監視屬性更改。

pre: function(scope, element, attributes) {
    var baseUrl = 'http://dummyimage.com/';
    attributes.$observe("mySrc", function(value) {
        attributes.$set("src", baseUrl + attributes.mySrc);
    })
}

<button ng-click="expr = '200'">Test dynamic</button>

我只是添加了一個快速按鈕來測試動態變化。 使用$observe ，每當mySrc屬性更改時， src屬性都將使用新的URL更新。

http://plnkr.co/edit/vogwUGai8iMavk5elDVB?p=preview

Answer 2

您可以在指令實現中執行所需的操作：

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

app.directive('mySrc', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        scope: true,
        template: '<li><img ng-src="{{ image }}" /></li>',
        link: function (scope, element, attrs) {
          var baseUrl = 'http://dummyimage.com/';
          console.log(attrs);

          scope.image = baseUrl + attrs.mySrc;
        }
    };
});

這是工作中的朋克