ng-if 不会阻止评估内部 HTML 中的 URL

Question

我有一些用ng-if标签进行条件化的HTML。

<div ng-if="localVideoExists">
    <video id="videoPlayer" controls src='{{localVideoSrc}}' style="max-height: 400px;" />
</div>

ng-if指令中的条件在任何时候都不会评估为 true 。 我认为这意味着内部 HTML 永远不会添加到DOM中。 但是，我的 Web 服务器日志在表单中显示许多请求

/{{localVideoSrc}}

因此，某些东西导致视频标签弹出存在（尽管我从未在DOM中找到它），并且它正在基于尚未评估的 Angular 模板字符串{{localVideoSrc}}创建 Web 请求。 我似乎无法阻止这种行为。实际上，我的控制器中的第一行是：

$scope.localVideoExists = false;

我现在还禁用了任何功能，这些功能会将localVideoExists设置为 true.

任何见解将不胜感激！

Answer 1

原因是 Angular 在加载DOM后加载。因此，在激活 Angular 之前，HTML 会被解析和执行。因此，浏览器将 HTML 加载到ng-if体内并发出请求 {{localVideoSrc}} .

若要防止此类行为，请使用 ng-src ： https://docs.angularjs.org/api/ng/directive/ngSrc

可能，由于安全性，您还需要使用$sce服务。

Answer 2

使用 ng-src 代替src

<div ng-if="localVideoExists">
    <video id="videoPlayer" controls ng-src='{{localVideoSrc}}' style="max-height: 400px;" />
</div>

请在此处查看更多信息 https://docs.angularjs.org/api/ng/directive/ngSrc