【问题标题】:angularjs: how to restart controllers to update the data source model to watch?angularjs:如何重启控制器来更新数据源模型来观看?
【发布时间】:2015-03-15 13:29:28
【问题描述】:

如何告诉 angularjs 停止查看过期的数据对象并强制控制器重新启动以查看新的模型实例?

    var ang = angular.module('ang', []);

    ang.controller('userCtrl', function($scope) {
        $scope.userData = myProject.getUserData(); // an OOP js data tree
    } 

    angular.bootstrap(document, ['ang']);

    // ... 

    myProject.reloadUserData(); // userData now a new instance

在我销毁用户数据对象以创建新的数据对象实例之前,Angular 可以完美运行。

如何告诉 Angular 停止查看旧用户数据并开始查看新数据?基本上我想重新启动角度或控制器。

【问题讨论】:

  • 是什么触发了 myProject.reloadUserData() 方法? Angular 具有无需破坏控制器或重新启动 Angular 即可触发更新的机制,但新数据如何到达控制器很重要。
  • 什么是 myProject?应使用服务注入第 3 方数据。你可以从控制器stackoverflow.com/questions/20667474/… 看到对象的变化
  • reloadUserData 仅创建所有应用程序使用的复杂 OOP 数据树对象的新实例。 getUserData 只是当前实例的访问器。
  • 这里非常简化,但 myProject 是一个大型 Web 应用程序,它使用 Angular 来显示/更新一些视图。这不是一个 100% 有角度的应用程序。

标签: javascript angularjs


【解决方案1】:

无需因为模型更新而重新启动您的 Angular 应用程序。这不仅是迂回,而且您还必须承受重新编译 DOM 的性能损失。

相反,我建议您创建一个服务来处理同步。

ang.factory('userService', function ($rootScope) {
    var userService = {
        // We'll initialize this in a moment
        data: undefined,

        // Method to refresh the data property
        refresh: function () {
            userService.data = myProject.getUserData();
        }
    };

    userService.refresh();

    return userService;
});

现在,在您的控制器中,您将使用此服务而不是全局 myProject 对象。

ang.controller('userCtrl', function($scope, userService) {
    $scope.user = userService; // Bind to {{user.data}} in your templates
});

最后,无论何时你调用myProject.reloadUserData(),你都必须refreshuserService对象。

$(document.body).injector().invoke(function (userService) {
    userService.refresh();
});

您可能只想将其添加到方法中。

【讨论】:

  • 它有效,谢谢你,Chris :) 但我有点惊讶你需要将数据源封装在服务中才能做到这一点。所以Angularjs没有办法动态改变控制器中的数据绑定?
  • 你可以直接用控制器做同样的事情,但这并不是真正适合它的地方。哎呀,您可以将其全部放入$rootScope 并以这种方式进行更新。使用服务允许您封装刷新逻辑。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-09-27
  • 1970-01-01
  • 2012-12-27
  • 1970-01-01
  • 1970-01-01
  • 2017-09-20
  • 1970-01-01
相关资源
最近更新 更多