javascript - angularjs 将变量传递给 Controller

Question

我的 Angular Controller 设置与文档中显示的大多数示例一样，因此它是一个全局函数。我假设当 Angular 引擎在 html 中看到 Controller 标签时，正在调用 Controller 类。

我的问题是我想将一个参数传递给我的 Controller ，但我不知道该怎么做，因为我没有初始化它。我看到一些建议使用 ng-init 的答案。但是我的参数不是一个简单的字符串——它是一个复杂的对象，正在被我的 js 的另一个(非 Angular )部分加载。它也不能直接加载，但需要一段时间才能出现。

所以我需要一种方法来在这个对象最终完成加载时将其传递到 Controller (或作用域)中，以便 Controller 可以与其交互。这可能吗？

Answer 1

您可以为此使用服务或工厂，并结合 promise :

您可以设置一个返回 promise 的工厂，并创建一个全局函数(可从第 3 方 JS 访问)来解析 promise 。

注意 $rootScope.$apply() 调用。在 $apply 循环之前，Angular 不会调用 promise 的 then 函数。查看$q docs .

app.factory('fromoutside', function($window, $q, $rootScope) {
    var deferred = $q.defer();

    $window.injectIntoAngularWorld = function(obj) {
        deferred.resolve(obj);
        $rootScope.$apply();
    };

    return deferred.promise;
});

然后在您的 Controller 中，您可以请求 fromoutside 服务并在数据到达时绑定(bind)到数据:

app.controller('main', function($scope, fromoutside) {
    fromoutside.then(function(obj) {
        $scope.data = obj;
    });
});

然后在 Angular 之外的某个地方:

setTimeout(function() {
    window.injectIntoAngularWorld({
        A: 1,
        B: 2,
        C: 3
    });
}, 2000);

Here's a fiddle of this .

就我个人而言，我觉得这比通过 DOM 访问 Angular Controller 要干净一些。

编辑:另一种方法

Mark Rajcok 在评论中询问是否可以对其进行修改以允许多次获取数据。

现在，多次获取数据可能意味着增量更新、更改对象本身或其他事情。但需要做的主要事情是将数据放入 Angular 世界，然后获得正确的 Angular 范围来运行它们的 $digest。

In this fiddle ，我已经展示了一种方法，当您可能只是从 Angular 之外获取对数组的更新时。

它使用了与上面的 promise 示例类似的技巧。

这是主要的工厂:

app.factory('data', function($window) {
  var items = [];
  var scopes = [];

  $window.addItem = function(item) {
    items.push(item);
    angular.forEach(scopes, function(scope) {
        scope.$digest();
    });
  };

  return {
    items: items,
    register: function(scope) { scopes.push(scope); }
};

与前面的示例一样，我们将一个函数附加到 $window 服务(将其全局公开)。新位公开了一个 register 函数，想要更新 data 的 Controller 应该使用它来注册自己。

当外部 JS 调用 angular 时，我们只是遍历所有已注册的范围并在每个范围上运行摘要以确保它们已更新。