javascript - 如何以 "right"方式内联初始化 angular.js Controller 数据

Question

我知道如何通过 http 请求上的 promise 来执行此操作，但在这种情况下，必须从内联脚本初始化数据。

该 Controller 已在 header js 中定义:

var testModule = angular.module('myTestModule', []);
testModule.controller('testCtrl', function ($scope) {
    $scope.data = [];
});

加载以下 html，为了便于论证，我们假设需要很长时间才能完成脚本部分:

<div ng-app="myTestModule" ng-controller="testCtrl">
...
</div>
<script type="text/javascript">
    setInitialData(['boo', 'far']);
</script>

如果内联脚本是在带有 ng-app 的 div 之前加载的，我不会遇到问题，但在这种情况下，它可能会在 Controller 实例化后加载。我试图避免额外的 http 请求，尽管使用带有 Angular 服务的 promise 很方便。

有人知道如何构造函数 setInitialData 以便将数据应用到 Controller /作用域吗？

Answer 1

您可以使用 angular.element(...).scope() 方法来获取对任何 DOM 元素范围的引用(提示:使用 angular.element($0 ).scope()(在 devtools JS 控制台中获取“元素”选项卡中当前选定元素的范围)。

从那里您可以根据需要更改范围。确保调用 $apply() 以使 AngularJS 意识到更改。

例如

<div ng-app="myTestModule" ng-controller="testCtrl" id="testCtrl">
...
</div>
<script type="text/javascript">
    function setScopeValue(selector, scopeProp, value) {
        angular.element(selector).scope().$apply(function ($scope) {
            $scope[scopeProp] = value;
        });
    }

    function setInitialData(data) {
        setScopeValue('#testCtrl', 'data', data);
    }

    setInitialData(['boo', 'far']);
</script>

请注意，我的 setScopeValue() 函数仅适用于单级属性访问，因此不支持点。如果您需要设置嵌套属性，则需要使用 $parse() 创建一个 setter 函数，您可以使用 $scope 和要设置的值来调用。