angularjs - 如何向 Angular 的 Controller /$scope 提供初始数据？

Question

除了通过指令处理的 DOM 中的属性(其中 ngInit 就是一个方便的例子)之外，似乎没有其他方法可以向 Angular Controller 提供数据。

我想提供其他“构造函数”数据，例如具有我的功能的对象 $scope .

背景:我们有一个现有的仪表板式单页应用程序，其中每个小部件管理一个 <div>和小部件实例特定的数据与支持功能等一起作为对象提供。该对象数据不太适合 DOM 属性或 ngInit来电。

我实在想不出比拥有全局哈希并使用特定于实例的唯一 key 更好的方法了。调用之前angular.bootstrap(domElement, ['myApp']) ，我们在该键下设置此全局哈希中的所有“构造函数”参数，然后使用

<div ng-init='readInitialValuesFromHash("uniqueKey")'>...</div>

哪里readInitialValuesFromHash获取其所有数据 globalHash["uniqueKey"]并将其需要的内容存储在 $scope 中(可能只是 "uniqueKey" )。

(似乎替代方案是使用指令和 jQuery.data() ，但 jQuery.data uses a global hash behind the scenes )

当然我可以将全局数据隐藏在函数中，但基本上仍然使用单例/全局变量。这个“全局散列并将 key 作为参数传递给 ng init技巧”看起来就像是一个黑客......

我错过了什么吗？有没有更好的方法，鉴于小部件实例特定的数据实际上比适合的更复杂由于遗留仪表板，通过指令/属性插入 DOM框架？

将复杂的物体放入$scope会有危险吗？只要它们未被指令引用，{{}}或$scope.$watch()来电？

Angular's front page说:

Add as much or as little of AngularJS to an existing page as you like

那么鉴于此，我应该如何进行？

<小时/>

编辑:评论要求使我的问题更清楚。作为一个重要的构造函数参数的示例，假设我想给出 myObj到 Controller ，原型(prototype)继承，功能和所有:

var proto = {
    p1: "p1",
    pf: function() {
        return "proto"
    }
};
function MyObj(ost) {
    this.ost = ost;
}
MyObj.prototype=proto;
var myObj = new MyObj("OST");

所以我有 myObj，还有一个字符串:

<div ng-app='myApp' ng-controller="MyCtrl">....</div>

我将字符串放入 DOM 中，并调用 angular.bootstrap() .

如何获得真实的myObj对象进入 MyCtrl的$scope为此<div> ，不是它的序列化/反序列化版本/副本？

Answer 1

服务就是您所寻找的。

您可以创建自己的服务，然后将它们指定为组件( Controller 、指令、过滤器、服务)的依赖项，因此 Angular 的依赖项注入(inject)将处理剩下的事情。

<小时/>

需要记住的要点:

• 服务是应用程序单例。这意味着每个注入(inject)器只有一个给定服务的实例。由于 Angular 对全局状态非常敏感，因此可以创建多个注入(inject)器，每个注入(inject)器都有自己的给定服务实例，但这很少需要，除非在该属性至关重要的测试中。

• 服务是延迟实例化的。这意味着只有当需要实例化服务或依赖于它的应用程序组件时才会创建服务。换句话说，除非应用程序直接或间接请求，否则 Angular 不会实例化服务。

• 服务(可通过 DI 注入(inject))比全局状态(并非如此)更受青睐，因为它们更易于测试(例如，容易被 mock 等)并且“更安全”(例如，防止意外冲突)。

<小时/>

相关链接:

• Understanding Angular Services
• Managing Service Dependencies
• Creating Angular Services
• Injecting Services into Controllers
• Testing Angular Services
• About Angular Dependency Injection

<小时/>

示例:

根据您的具体要求，最好创建一项服务来保存所有配置数据或为每个小部件创建一项服务。在后一种情况下，将所有服务包含在它们自己的模块中并将其指定为主模块的依赖项可能是个好主意。

var services = angular.module('myApp.services', []);
services.factory('widget01Srv', function () {
    var service = {};
    service.config = {...};

    /* Other widget01-specific data could go here,
     * e.g. functionality (but not presentation-related stuff) */
    service.doSomeSuperCoolStuff = function (someValue) {
        /* Send `someValue` to the server, receive data, process data */
        return somePrettyInterestingStuff;
    }
    ...
    return service;
}
services.factory('widget02Srv', function () {...}
...

var app = angular.module('myApp', ['myApp.services']);
app.directive('widget01', function ('widget01Srv') {
    return function postLink(scope, elem, attrs) {
        attrs.$set(someKey, widget01Srv.config.someKey);
        elem.bind('click', function () {
            widget01Srv.doSomeSuperCoolStuff(elem.val());
        });
        ...
    };
});