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替换为基目录。我创建了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

您的指令确实有效，但您的方法略有不同。您不希望将my-src更改为ng-src，因为ng-src是一个类似于您尝试执行操作的指令。您实际想要做的是将my-src更改为src，这样浏览器就可以实际呈现标记。

换句话说，attributes.$set("src", baseUrl + attributes.mySrc);可以满足您的需求。但是，它不是动态的。

取自ng-src的{{3}}，您可以使用$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属性就会使用新网址进行更新。

source

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

以下是工作 plunkr

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

2 个答案: