Angular service/value 没有从 $(document).ready() 获取新变量

Question

我有一个 Angular service/value 试图获取一个变量，但它获取的是原始变量而不是新变量。新变量应该是 $(document).ready() 中的变量，如下所示：

var app = angular.module("app", []);
var db = "asdf"
$(document).ready(function(){
    // document.getElementById("DB_content").value === '[{"name":"Joe", "age":"19"}, {"name":"Jill", "age":"21"}]'
    db = document.getElementById("DB_content").value;
    console.log(db);
});
app.value("DBcontent", db);

但不是 DBcontent 保存字符串 "array"，而是保存 "asdf"。我怀疑这是因为 app.value("DBcontent", db) 被立即执行，甚至在 $(document).ready() 之前。我试过将 var db 放在 $(document).ready() 之外，但这会破坏它。有谁知道我可以在这里做什么？

https://jsfiddle.net/dop49d54/4/

Answer 1

app.value(...) 在 $(document).ready(...)

之前立即运行

如果您希望它具有在 $(document).ready(...) 中获取的值，您需要将它移动到该事件处理程序中。

$(document).ready(function(){
    var app = angular.module("app", []);
    // document.getElementById("DB_content").value === '[{"name":"Joe", "age":"19"}, {"name":"Jill", "age":"21"}]'
    var db = document.getElementById("DB_content").value;
    console.log(db);
    app.value("DBcontent", db);
});

将 <script> 标签向下移动到 <body> 的底部即可！

<script>
var db = "asdf";
(function go(){
    db = document.getElementById("DB_content").value;
    console.log(db);
    app.value("DBcontent", db);
})();
<script>

Answer 2

从根本上说，您已通过在 var.

前缀中将 $document.ready() 函数内的 db 变量标记为本地变量

函数内的 db 变量不会更新 angular 应用旁边定义的全局 db 变量。

另请注意 app.value("DBcontent", db); 在 $document.ready() 之前运行。如果您需要将 DOM 中的内容提供给 angular 变量，请将 DOM 元素设为指令并在范围内设置值。或者您也可以在这种情况下使用 ng-init。

Angular service/value 没有从 $(document).ready() 获取新变量

Angular service/value is not picking up new var from $(document).ready()

javascript

jquery

angularjs

document-ready

angular-services