角自定义属性的指令应当由另一指令

的SRC样属性的我试图实现一个自定义属性的指令所取代，这应该代表了一个目录的相对路径。角自定义属性的指令应当由另一指令

到目录的路径是一个全局变量（比如MYDIR）。

属性应该以纳克-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 }}" />

我们支持的最后两个选项也很重要。

来源

2015-08-29 dor.elmaliach

你能粘贴你到目前为止指令的代码吗？ – Subash

和你的snippt是？ –

增加了一个plunkr和我试过的代码。 –

你的指令实际工作，但你的做法是稍微偏离。您不希望将my-src更改为ng-src，因为ng-src是一个指令，它与您尝试执行的操作类似。 实际上想要做的是将my-src更改为src，所以浏览器实际上可以呈现标签。

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

对于ng-src来自source，您可以使用$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

来源

2015-08-30 02:26:35 Claies

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

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

来源

2015-08-29 00:44:57 Subash

请参阅我的编辑 –

角自定义属性的指令应当由另一指令

回答

相关问题