javascript - Python 和 Angular 在变量值上存在分歧

Question

因此，为了适本地构建这个框架，我在这里继承了一个代码库，并且我对 Angular 没有深入的了解。基本上有一个应用程序可以根据数据库导入是否完成来显示或隐藏加载 gif。

由于某种原因，尽管数据集导入已完成，但 Angular 仍无法识别它。下面的简化代码示例:

<h4>Status
    <small ng-hide="dataset.failed">{{ dataset.status }}</small>
    <img class="pull-right" ng-hide="(dataset.import_complete || dataset.failed)" src="/url" height="12">
</h4>
    <span>{{ dataset.import_complete }}</span>

我出于调试目的添加的跨度，但本质上该跨度显示 True ，而img上面的标签仍然显示。这意味着 Angular 正在评估 dataset.import_complete || dataset.failed至False相反。

为什么会发生这种情况？任何有助于调试此行为的建议将不胜感激。

更新: 我认为这里的想法是这里发生了一些错误的类型检查。具体来说，以下内容似乎是正确的:

# Always evaluates to True, regardless of import_complete
dataset.import_complete == True
# Always evaluates to False, again, regardless of import_complete
dataset.import_complete == 'True'
# result is bool, as it should be, making this only more baffling
type(dataset)

另外，这里有一些后端，但可能不是很有帮助:

@route(bp, '/dataset/<int:dataset_id>', methods=["GET", "POST"])

def 数据集(dataset_id): """返回数据集管理页面"""

dataset = Dataset.query.get_or_404(dataset_id)

return render_template(
    'manage/dataset.html',
    dataset=dataset,
)

如需了解更多信息，请参阅 vars(dataset) 的输出:

{'import_complete': True, 'failed': False, 'pending_deletion': False}

Answer 1

你的表达式是否在 NG 运行之前就被 Jinja2 插值了？

不要忘记 Jinja 和 Angular 都使用相同的 {{和}}语法标记。

在我看来，您正在使用 Jinja 来渲染该 HTML，并且如果该 HTML 也包含您的 AngularJS 代码，那么 {{ expr }}在 AngularJS 在浏览器上运行之前由 Flask/Jinja 进行插值。

我的猜测是True你在 HTML 中看到，来自Jinja2 渲染这个表达式(不是 Angular)

<span>{{ dataset.import_complete }}</span>

至少有 key import_complete是 undefined在 dataset Angular 应用程序 $scope 中的 JS 对象。 (因为 someObject.undefinedKey == 'True' 会给 JS bool 值 false )

$scope.dataset对象很可能存在于您的 ng 应用程序中，但它看起来并不像 $scope.dataset包含 key import_complete (要使 ng-hide="dataset.import_complete" 正常工作，您需要明确定义 $scope.dataset.import_complete)

如何检查？

要确认确实是 Jinja2 渲染了上述内容，请尝试使用 curl 保存来查看 HTML或wget ，您应该看到它没有 <span>{{ dataset.import_complete }}</span>在静态 HTML 中供 NG 运行，但带有 <span>True</span>

如何修复

如果这是真的，那么 try adapting more structured way this to your project, by separating the server/API and the client

否则，为了快速修复，您可以 change the tokens for your angular app to something else ，然后弄清楚如何将变量放入 $scope 中(例如，在 Jinja 中渲染 $scope.dataset = {{dataset_json}}; 以将其输入 JS，这是从长远来看要避免的黑客行为)

调试

如果这个<span>{{ dataset.import_complete }}</span>显示True作为输出，这确实表明 key import_complete实际上保存一个值为 "True" 的字符串其中，与 JS bool 值 true 相反

我同意你的评论，你说你尝试过一些事情但没有成功

ng-hide="dataset.import_complete == 'True'"

That seems possible, but I'm at a loss for how to debug that.

所以我建议您研究一下 dataset 的值对象，像这样

<p>{{dataset}}</p>或者也许<p>{{dataset | json}}</p> ，那么你就可以确定它的值和类型

您还可以查看浏览器的开发工具“网络”选项卡，了解 Flask 后端已发送回 AngularJS 的内容。