angular 自定义属性指令应替换为另一个指令

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 material 使用。

感谢您的帮助！

编辑：

对不起，我没有很好地解释自己。我想支持在各种元素中使用 mySrc 指令。它应该替换为 ng-src 与基本目录。我创建了一个 plunkr 但它不起作用。到目前为止，代码如下所示：

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

您可以在指令实现中执行所需的操作：

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

这是工作plunkr

Answer 2

您的指令确实有效，但您的方法略有偏差。您不想将 my-src 更改为 ng-src，因为 ng-src 是一个执行与您尝试执行的操作类似的指令。您 实际上 想要做的是将 my-src 更改为 src，以便浏览器实际呈现标签。

换句话说，attributes.$set("src", baseUrl + attributes.mySrc); 做你想做的事。但是，它不是动态的。

摘自 source for 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

angular 自定义属性指令应替换为另一个指令

angular custom attribute directive should be replaced by another directive

javascript

angularjs

angularjs-directive

angular-material