Angular自定义属性指令应该被另一个指令取代

angular custom attribute directive should be replaced by another directive

本文关键字：指令 另一个 取代 自定义属性 Angular      更新时间：2023-09-26

我正在尝试实现一个自定义属性指令的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>

我也想支持这不仅仅是角材料的使用。

谢谢你的帮助!

编辑:

我很抱歉我没有把自己的话解释清楚。我想支持在所有类型的元素中使用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 }}" />

支持后两个选项对我们来说也很重要

您的指令实际上有效，但您的方法略有偏离。您不想将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 =预览

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

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

相关文章：