Angularjs:双向数据绑定和控制器重新加载

时间:2022-02-05 17:02:47

If use routing and controllers, then model not save his states between controller reload. Angular create controller instance and new scope on every route load.

如果使用路由和控制器,那么模型不会在控制器重新加载之间保存其状态。 Angular在每个路由负载上创建控制器实例和新范围。

For example, i type something in input that have ng-model="something", go to another route, then back to first route. All my typed text is lost.

例如,我输入的内容有ng-model =“something”,转到另一条路线,然后回到第一条路线。我输入的所有文字都丢失了。

I need simple two way data binding between routes changing. As simple as possible, like ko.observable in knockoutjs. Or implicitly like in angular within one controller. Maybe with singleton $scope for controller?

我需要在路由更改之间进行简单的双向数据绑定。尽可能简单,比如knockoutjs中的ko.observable。或者隐含地像在一个控制器内的角度。也许使用singleton $ scope作为控制器?

I found the way, when i create service for saving data between route changing, and inject it into controller. In controller's constructor i create model with value from service, and $scope.watch this model for changes, and on change i set model's value to service.

当我创建服务以在路由更改之间保存数据并将其注入控制器时,我找到了方法。在控制器的构造函数中,我使用service中的值创建模型,并使用$ scope.watch这个模型进行更改,并在更改时将模型的值设置为service。

Is there any simpler way?

有没有更简单的方法?

2 个解决方案

#1


11  

You are right - services is right way for doing this. You can use it like so:

你是对的 - 服务是这样做的正确方法。您可以像这样使用它:

app.js

app.js

app.factory('paginationService', function() {
    return {
        cur: 1,
        total: 9,
        pageSize: 8
    };
});


app.controller('Page1Ctrl', function($scope, paginationService) {
  $scope.pagination = paginationService;
});

Page1.html

Page1.html

<div ng-controller="Page1Ctrl">
  <h2>Page1</h2>

  <p>curPage: <input type="number" ng-model="pagination.cur" /></p>  
</div>

See full example.

查看完整示例。

#2


0  

You could inject $rootScope into your controller and use it to store globally accessible variables, though you would still have the same issue watching for changes. You could create a directive which would inject your service into the current scope, and have it bind watch handlers in the scope as well.

您可以将$ rootScope注入控制器并使用它来存储全局可访问的变量,尽管您仍然会在观察更改时遇到相同的问题。您可以创建一个指令,将您的服务注入当前作用域,并将其绑定到作用域中的监视处理程序。

#1


11  

You are right - services is right way for doing this. You can use it like so:

你是对的 - 服务是这样做的正确方法。您可以像这样使用它:

app.js

app.js

app.factory('paginationService', function() {
    return {
        cur: 1,
        total: 9,
        pageSize: 8
    };
});


app.controller('Page1Ctrl', function($scope, paginationService) {
  $scope.pagination = paginationService;
});

Page1.html

Page1.html

<div ng-controller="Page1Ctrl">
  <h2>Page1</h2>

  <p>curPage: <input type="number" ng-model="pagination.cur" /></p>  
</div>

See full example.

查看完整示例。

#2


0  

You could inject $rootScope into your controller and use it to store globally accessible variables, though you would still have the same issue watching for changes. You could create a directive which would inject your service into the current scope, and have it bind watch handlers in the scope as well.

您可以将$ rootScope注入控制器并使用它来存储全局可访问的变量,尽管您仍然会在观察更改时遇到相同的问题。您可以创建一个指令,将您的服务注入当前作用域,并将其绑定到作用域中的监视处理程序。