Question

我正在尝试为我的控制器创建一个可重复使用的组件，可以在不同的控制器中多次使用。

请参阅plunker：http://plnkr.co/edit/Lc4z4L?p=preview

plunker中显示的问题是，在FirstCtrl中显示的信息与SecondCtrl中相同。

如何通过该服务实现某种孤立的范围？或者我使用了错误的概念？

Answer 1

虽然服务只有一个实例，但您也可以返回一个函数，然后您可以在控制器中new，它将为您提供该函数的单个实例：

app.service('alertService', function($timeout) {  
  return function () {
    // assign this to service only because I'm lazy
    var service = this;
    var timeout;

    // start with empty array holding the alerts.
    service.alert_list = [];

    // method to add an alert
    // alert_obj is a object with members type = ( success | info | warning | danger )
    // and msg which is the message string 
    service.addAlert = function (alert_obj) {
        service.alert_list = [];
        service.alert_list.push(alert_obj);
        $timeout.cancel(timeout);
        timeout = $timeout(service.clearAlerts, 5000);
    };

    service.clearAlerts = function clearAlerts() {
        service.alert_list = [];
    };
  }
});

您更新的控制器现在看起来像这样：

app.controller('SecondCtrl', function($scope, alertService, $timeout) {

  $scope.alertService = new alertService();

  $scope.alertService.addAlert({"type": "info", "msg": "Infomessage II"});

  $scope.name = 'World II';
});

更新了plunker：http://plnkr.co/edit/RhJbbxj4XxdwY6GAest9?p=preview

角度控制器中的可重复使用组件

1 个答案: