角度控制器中的可重用組件

我正在嘗試爲可在多個控制器中多次使用的控制器創建可重用組件。角度控制器中的可重用組件

見plunker：http://plnkr.co/edit/Lc4z4L?p=preview

在plunker所示的問題，即在FirstCtrl示出比在SecondCtrl相同的消息。

我該如何使用服務實現某種隔離範圍？或者我使用錯誤的概念？

2014-01-30 Thomas

閱讀有關[的AngularJS文檔（HTTP服務：//做cs.angularjs.org/guide/dev_guide.services.creating_services）。您的整個應用只有1個服務實例。（在頁面ctrl + f：服務作爲單身人士） – Dieterg

@DieterGoetelen謝謝！我讀過它，我正在尋找一個我可以用來解決這個問題的角度概念。 – Thomas

只需將不同的對象傳遞給您的指令即可。您使用的是同一個對象=>它們顯示的是相同的。 –

雖然這是事實服務只有一個實例，您也可以返回一個函數，然後您可以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

來源

2014-01-30 15:15:33

角度控制器中的可重用組件

回答

相關問題