javascript - 是否应该始终使用 "ng-src"，即使没有插值？

Question

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

一些图像是静态 Assets 并且永远不会改变(它们可能有条件地显示)，而其他图像是动态的并且依赖于范围变量。

我可以在我认为合适的时候混合使用 ng-src 和 src 吗？

我问这个是因为我曾经读到在使用 angularjs 时我应该始终使用 ng-src，但我也担心我会创建实际上没有必要的绑定(bind)和监视...

Answer 1

总是使用 ng-src ?

• 我看不出有任何理由在没有插值的情况下使用 ng-src。
• @Vojta Jína says :“只有对属性进行插值，观察属性才有意义”
• 文档说:“在 src 属性中使用像 {{hash}} 这样的 Angular 标记不能正常工作”
• 并不是说在 angular.js 中使用 src 是不对的...!
• 与 ng-href 相同。
• 在没有插值的情况下使用 ng-src 可能不会导致性能问题。
• 如果你达到了性能，我猜 ng-repeat 是有罪的。

ng-src 总是创建绑定(bind)吗？

其实源码很简单 https://github.com/angular/angular.js/blob/v1.2.7/src/ng/directive/booleanAttrs.js

ng-src 将始终 $observe 你的属性。

// 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，来自文档:

The observer function will be invoked once during the next $digest following compilation. The observer is then invoked whenever the interpolated value changes.

或者更简单，如果没有插值就没有脏检查。据我所知，angular.js 与(很多)绑定(bind)有关的所有性能问题都是在进行脏检查时出现的。

向内看compile.js :

// no one registered attribute interpolation function, so lets call it manually

• 如果没有插值，我们最终只会调用回调一次。
• 对于 ng-src，您可以在上面看到 $observe 注册的回调。
• 如果有插值，那么 Angular 将像这样注册一个 $watch(脏检查)$watch(interpolateFn, function interpolateFnWatchAction(newValue, oldValue) {<

结论

• 没有插值时使用src
• 有插值时使用ng-src
• 在没有插值的情况下使用 ng-src 最终只会运行一次回调。意味着它对性能有微妙的影响。
• 另一个问题是图像不会开始加载，直到 angular 被引导或者如果你使用路由(谁不是？)直到你的 View 被编译。这可能会对加载时间产生重大影响。