Question

在我的angularjs项目中，我需要在我的标签中使用ng-src和src属性来回走动。

某些图像是静态资源，永远不会更改（它们可能会有条件地显示），而其他图像是动态的并且取决于范围变量。

每当我觉得合适时，我可以使用ng-src和src的混合吗？

我问的是因为我曾经读过我在使用angularjs时应该总是使用ng-src，但我也担心我会创建非常不必要的绑定和手表... < / p>

Answer 1

总是使用ng-src？

我没有看到任何使用ng-src而没有插值的原因。
@VojtaJínasays：“观看属性只有在插入时才有意义”
文档说：“在src属性中使用像{{hash}}这样的Angular标记不能正常工作”
不是说在angular.js中使用src是不对的......！
与ng-href相同的情况。
使用ng-src而不进行插值可能不会导致性能问题。
如果你达到表现，我猜ng-repeat是有罪的。

ng-src是否总是创建绑定？

实际上源代码非常简单 https://github.com/angular/angular.js/blob/v1.2.7/src/ng/directive/booleanAttrs.js

ng-src将始终$观察您的属性。

// ng-src, ng-srcset, ng-href are interpolated
forEach(['src', 'srcset', 'href'], function(attrName) {
  var normalized = directiveNormalize('ng-' + attrName);
  ngAttributeAliasDirectives[normalized] = function() {
    return {
      priority: 99, // it needs to run after the attributes are interpolated
      link: function(scope, element, attr) {
        attr.$observe(normalized, function(value) {
          if (!value)
             return;

          attr.$set(attrName, value);

          // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
          // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need
          // to set the property as well to achieve the desired effect.
          // we use attr[attrName] value since $set can sanitize the url.
          if (msie) element.prop(attrName, attr[attrName]);
        });
      }
    };
  };
});

至于$ observe，来自文档：

观察者函数将在下一个$digest期间调用一次编译后。然后每当调用观察者时插值变化。

或更简单，如果没有插值没有脏检查。 AFAIK，angular.js与（大量）绑定的所有性能问题都是在进行脏检查时。

进一步了解compile.js：

//没有人注册属性插值函数，所以我们手动调用它

如果没有插值，我们最终只能一次来调用回调。
在ng-src的情况下，您可以看到$ observe注册的回调。
如果有插值，则angular将注册$ watch（脏检查），如此$watch(interpolateFn, function interpolateFnWatchAction(newValue, oldValue) {

结论

在没有插值的情况下使用 src
在插值

ng-src

使用 ng-src 而不进行插值将最终仅运行一次回调。意味着它对绩效产生微妙的影响。
另一个问题是，在角度引导之前，或者在您编辑视图之前使用路径（谁不是？）之前，图像不会开始加载。这可能会对加载时间产生重大影响。

是否应该使用“ng-src”，即使没有插值？

1 个答案:

总是使用ng-src？

ng-src是否总是创建绑定？

进一步了解compile.js：

结论