Question

我们有一个遗留应用程序，它使用WYSIWYG编辑器创建只带有ID号的img标签作为src，然后src中的ID号后来被替换为图像的实际路径。对于遗留应用程序的AngularJS 1.3重写，我需要创建一个执行相同类型的指令，这样我们的指令就会读取src并用新路径替换src。编辑器插件输出的原始标记将是这样的：

<img src="70"></img>

我们的指令将读取此img标记上的src，使用数据库调用查找路径，然后用以下内容替换原始img标记：

<img src="images/logo.jpg"></img>

我可以使用下面的代码吗？我该如何完成此代码？我读过“替换”＃39; Angular 1.3中不推荐使用指令的功能。这会阻止我们使用这种方法吗？

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

myApp.directive('img', [function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) { 
        var imageId = attrs.src;
        $http.get('getImagePath/' + imageId).then(function() {
        // replace image tag with img src set to new path

        }
        }
    };

}]);

非常感谢任何建议或指示，谢谢！

Answer 1

这里没有特别需要特殊指令。

Angular太棒了，它允许你使用ng-src。

什么是ng-src？

ng-src是您正在寻找的指令，它评估表达式或绑定，它很聪明，您可以将它链接到控制器上将执行逻辑的函数。

一个例子是：

app.controller('myCtrl', function(){

$scope.turnIDtoThisLink = function(id){

   $http.get( ....... ).success(function(data){
    var img = data.url //example.
   }); // fill accordingly.
    return img;
}
});

并在html上：

<img ng-src="{{turnIDtoThisLinkn(id)}}"/>

Angular Directive - 用新指令替换默认的img标签吗？

1 个答案: