如何在“ng-src”中调用函数答案

【问题标题】：How to call a function in "ng-src"如何在“ng-src”中调用函数
【发布时间】：2014-11-04 19:21:19
【问题描述】：

我需要能够调用函数才能运行代码以动态检索图像的来源。以下代码 sn-p 显示了我想要的示例：

<!-- "myFunction" exists in the current scope -->
<img ng-src="myFunction()" />

我确定这一定很简单，但我在ng-src documentation 中找不到任何东西！有其他人打过这个吗？

提前致谢！

指令（基于答案的示例）

其他人推荐了一个指令。我不能发布客户端代码，所以我写了一个简短的例子来说明在 plunker (see here) 中的样子。核心指令本身是：

app.directive("imageSource", function (){
  return { link: function (scope, element, attrs){
      element.attr("src", scope.imageUrlArray[attrs.imageSource]);
    }
  };
});

我知道我在这里作为示例可能只是使用 ng-src 中的变量使用 ng-repeat 来完成，但它可以作为指令外观的示例就像有必要一样。

【问题讨论】：

如果你想调用这样的函数你真的应该写一个新的Directive
@Liam 我之前写过很多指令。有什么特别的原因是指令的情况，而不是直接调用函数来获取 url？
ng-src 是指令，对。您调用指令来调用函数。为什么？为什么不简单地编写一个自定义指令来返回 myfunction 所做的事情。会整洁很多。
@Liam 知道了！我肯定会考虑这样做。谢谢指点！
@Liam 注意！严格来说，我认为这不是我最初问题的答案，而只是一个有用的“侧边栏”。不过，在未来 - 我会作为答案发布！

标签： angularjs

【解决方案1】：

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

Fiddle

【讨论】：

感谢您的回答！我应该已经猜到了，但由于这不是我的正常模式，我以前没有尝试过。
我希望看到使用 @Liam 建议的自定义指令的更好解决方案。
我会在 JSFiddle 中写得很快，并且会修改我的问题，以包括那些将来遇到同样问题的人。尽快注意（如果你在乎的话）！
我测试了这个方法，发现它不适合调用$http服务或者其他任何函数，因为angularjs会继续循环运行函数
是的，答案是正确的，但它循环了太多次。（如果在 ng-repeat 下）这是不可取的。

【解决方案2】：

好吧，终于到了：

JavaScript：

 angular.module('MyApp', [])
    .controller('Ctrl2', function($scope) {
    })
    .directive('mySrc', function() {
        return {
        restrict: 'A',
        link: function ( scope, elem, attrs ) {
             //replace test with whatever myFunction() does
             elem.attr('src', 'test1');
        }
      };
    });

HTML：

<div ng-app="MyApp">
  <div ng-controller="Ctrl2">
      <img my-src />
  </div>
</div>

Fiddle

【讨论】：

将 myFunction 作为参数传递给指令怎么样？
这个方法是否维护了angular的双重数据绑定？

【解决方案3】：

将 myFunction 作为参数传递给自定义指令不是更好吗？这样，我们就可以将两者解耦，并且可以很容易地更改将来要传入的函数。

HTML

<body ng-app='testApp'>
    <div ng-controller='TestCtrl'>
        <img my-src callback='myFunction()' />
    </div>
</body>

JS：

angular.module('testApp', [])
.controller('TestCtrl', function($scope) {
    $scope.myFunction = function() {
        return 'http://nodejs.org/images/roadshow-promo.png';
    }
})
.directive('mySrc', function() {
    return {
        restrict: 'A',
        scope: {
            callback: '&'
        },
        link: function ( scope, elem, attrs ) {
            elem.attr('src', scope.callback());
        }
    };
})

http://jsfiddle.net/GLS2a/

【讨论】：

但是通过这样做，当逻辑应该存在于控制器中时（关注点分离），您可以有效地将逻辑（myFunction）放入视图中。我也看不出这比 CodeHater 提供的解决方案更好。是一样的东西，只是包装方式略有不同
你的指令与ng-src有何不同？