Question

这是我的Angular.js控制器功能代码：

myControllers.controller("TreeDataController", ["$scope", function ($scope) {

    $scope.greeting = "TreeDataController";

    treeDataSource.getData("123", function (rootNode) {
        // this is the callback when the AJAX operation succeeds, rootNode is a JSON object which contains hierarchical data.
        $scope.tree = rootNode;

        console.log("Got rootNode.");

        $scope.foobar = "baz";

    }, function (e) { alert(e); });

}]);

这是我的观点：

<h2>Queries</h2>
{{greeting}}
{{foobar}}
<script type="text/ng-template" id="treeItemRenderer.html">
    {{node.name}}
    <ul>
        <li ng-repeat="node in node.value" ng-include="''treeItemRenderer.html''"></li>
    </ul>
</script>
<ul>
    <li ng-repeat="node in tree" ng-include="''treeItemRenderer.html''">
        {{node.name}}
    </li>
</ul>

当我在Chrome中运行此页面时，页面会显示＆＃34; TreeDataController＆＃34;在{{greeting}}占位符中，控制台报告它获取了数据（请参阅我的console.log调用），但树数据永远不会显示。我认为这是我的递归模板的问题所以我添加了$scope.foobar = "baz";和{{foobar}}，但是也没有填充。

Answer 1

这是处理Angular时常见的错误。
由于您正在更新范围应用之外的$ scope，因此您实际上并未导致Angular执行任何模板重新渲染。
这很容易修复，在$scope.$apply中包装任何$ scope调用，请参阅以下内容：

treeDataSource.getData("123", function (rootNode) {
  $scope.$apply(function () {
    $scope.tree = rootNode;
    console.log("Got rootNode.");
    $scope.foobar = "baz";
  });

}, function (e) { alert(e); });

修改控制器函数内回调中的$ scope

1 个答案: