angularjs传递变量到控制器变量、控制器、angularjs

2023-09-13 03:44:57 作者:如玉公子乱浮生

我有我的角度控制器设置最喜欢在这样的文档,它是一个全球性的功能显示的例子。我认为,当角引擎看到在html控制器标签控制器类被调用。

I have my angular controller setup like most of the examples shown in the docs such that it is a global function. I assume that the controller class is being called when the angular engine sees the controller tag in the html.

我的问题是,我想在一个参数来我的控制器来传递,我不知道该怎么做,因为我不进行初始化。我看到一些答案建议使用NG-的init。但我的参数不是一个简单的字符串 - 这是由我的js的另一个(非角)部分加载一个复杂的对象。这也是负载无法正确的,但需要一段时间来陪伴。

My issue is that i want to pass in a parameter to my controller and i don't know how to do that because I'm not initializing it. I see some answers suggesting the use of ng-init. But my parameter is not a trivial string - it is a complex object that is being loaded by another (non-angular) part of my js. It is also not available right on load but takes a while to come along.

所以,我需要一种方法来传递这个对象,当它终于完成加载,到控制器(或范围),这样,控制器可以与它进行交互。这可能吗?

So i need a way to pass this object, when it finally finishes loading, into the controller (or scope) so that the controller can interact with it. Is this possible?

推荐答案

您可以使用服务或工厂对于这一点,与承诺相结合:

You can use a service or a factory for this, combined with promises:

您可以设置一个工厂,返回一个承诺,并创建一个全局函数(从第三方JS访问)来解决的承诺。

You can setup a factory that returns a promise, and create a global function (accessible from 3rd-party JS) to resolve the promise.

请注意在 $ rootScope。$适用()电话。角将不会调用然后承诺的功能,直到 $适用周期。请参阅 $ Q 文档。

Note the $rootScope.$apply() call. Angular won't call the then function of a promise until an $apply cycle. See the $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;
});

然后在你的控制器,你可以要求在 fromoutside 服务,并绑定到数据到达时:

And then in your controller, you can ask for the fromoutside service and bind to the data when it arrives:

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

然后某处角以外的:

And then somewhere outside of Angular:

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

下面是这个的小提琴。

就个人而言,我觉得这是比通过DOM达到成角器清洁剂一点点。

Personally, I feel this is a little bit cleaner than reaching into an Angular controller via the DOM.

标记Rajcok问一个评论,如果这可以被修改,以允许获取数据一次以上。

Mark Rajcok asked in a comment if this could be modified to allow getting data more than once.

现在,越来越不止一次的数据更可能意味着增量更新,或改变物体本身,或其他东西。但是,这需要发生所得到的数据转换成角世界,然后找到合适的角度范围来运行他们的 $消化 S中的主要的事情。

Now, getting data more than once could mean incremental updates, or changing the object itself, or other things. But the main things that need to happen are getting the data into the Angular world and then getting the right angular scopes to run their $digests.

在这种提琴,我展示的一种方式,当你可能只是得到更新,从外面数组棱角分明。

In this fiddle, I've shown one way, when you might just be getting updates to an Array from outside of angular.

它采用了类似的伎俩上述承诺的例子。

It uses a similar trick as the promise example above.

下面是主要的工厂:

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); }
};

像previous例如,我们非常重视 $窗口服务(全球露出它)的功能。新的位被曝光注册的功能,希望更新数据该控制器应该使用自己注册。

Like the previous example, we attach a function to the $window service (exposing it globally). The new bit is exposing a register function, which controllers that want updates to data should use to register themselves.

在外部JS调用到角,我们只是遍历所有已注册的范围,并在每次运行一个摘要,以确保他们在更新。

When the external JS calls into angular, we just loop over all the registered scopes and run a digest on each to make sure they're updated.