AngularJS - 多個控制器的單個警報格

我想要一個單一的引導程序3警報來顯示用戶可以在頁面上執行的所有操作的一般錯誤或成功消息。該頁面在不同的區段劃分，每款不同的控制器，這樣的事情：AngularJS - 多個控制器的單個警報格

<body ng-app="app"> 
    <div ng-controller="securityController"> 
    [controller methods for change password, validate user section, ...] 
    <div ng-controller="salesController"> 
     <div class="alert" ng-show="message.visible"><strong>{{message.title}}</strong>{{message.text}}</div></div> 
     [controller methods for admin sales, admin products, admin retails, ...] 
    </div> 
    </div> 
</body>

然後，我希望能夠給這個網站綁定到誰想要當用戶顯示一個消息控制器的所有車型在頁面中執行一個動作（當它與securityController方法交互時的Ej。安全消息，與salesController方法交互時的驗證消息）

首先，我認爲級聯控制器並使它們具有綁定變量的名稱用於警報HTML可以工作（例如，在securityController和salesController中有一個$ scope.message對象），但它不起作用，墨水是正確的方法。

我該如何做到這一點？

來源

2014-06-06 Roberto Linares

這裏是我爲我的一個應用程序編寫的示例代碼。

演示：http://plnkr.co/edit/pGhKOTtqFxpD4fukhQrl?p=preview

指令：

app.directive('alert', function(alertService) { 
    return { 
    restrict: 'AE', 
    link: function(scope, e, a, ctl) { 
     scope.alert = alertService.alertObj; 
    }, 
    template: '<div class="alert" ng-class="alert.type" ng-show="alert.show">{{alert.msg}}</div>' 
    }; 
});

服務：鏈接多個與指令控制器。

app.service('alertService', function() { 
    var me = this; 
    me.alertObj = { 
    show: false, 
    msg: '', 
    type: 'alert-success' 
    }; 
    me.alertShow = false; 
    me.alertTypes = ['alert-success', 'alert-info', 'alert-warning', 'alert-danger']; 
    me.alert = function(type, msg) { 
    me.alertObj.msg = msg; 
    me.alertObj.type = me.alertTypes[type]; 
    me.alertObj.show = true; 
    }; 
    me.success = function(msg) { 
    me.alert(0, msg); 
    }; 
    me.info = function(msg) { 
    me.alert(1, msg); 
    }; 
    me.warning = function(msg) { 
    me.alert(2, msg); 
    }; 
    me.danger = function(msg) { 
    me.alert(3, msg); 
    }; 
    me.hide = function() { 
    console.log('hiding'); 
    me.alertObj.show = false; 
    }; 
    return this; 
});

控制器：樣品控制器

app.controller('ctl1', function($scope, alertService) { 
    $scope.name = 'World'; 
    $scope.showAlert = function() { 
    alertService.success("This is an success alert"); 
    }; 
});

HTML：

<alert></alert> 
    <div ng-controller="ctl1"> 
    <button ng-click="showAlert()">ctl1 - Success alert</button> 
    </div> 
    <div ng-controller="ctl2"> 
    <button ng-click="showAlert()">ctl2 - Warning alert</button> 
    </div> 
    <div ng-controller="ctl3"> 
    <button ng-click="showAlert()">ctl3 - Danger alert</button> 
    </div> 
    <div ng-controller="ctl4"> 
    <button ng-click="showAlert()">ctl4 - Info alert</button> 
    <button ng-click="hide()">Clear Alert</button> 
    </div>

來源

2014-06-06 07:38:53 guru

哇！我不知道你可以用服務初始化指令，然後在模板中使用服務對象！這是我選擇的答案。 –

類似的東西我想用Bootstrap的模式來做，以便能夠在發生任何錯誤時將其顯示給用戶。

服務首先：

.service('ErrorService', function() { 
    var error; 

    this.setError = function(value) { 
     error = value; 
    }; 

    this.getError = function() { 
     return error; 
    }; 

    this.clearError = function() { 
     error = undefined; 
    }; 
})

然後一個指令，它看起來對服務的getError和顯示器本身，如果服務返回一些值：

如果你想設置錯誤，從任何其他JS代碼的控制器（當然你已經注入了服務！）只是做：

ErrorService.setError(someError);

而且我index.html中僅包含在HTML代碼，一旦指令：

<div error-modal></div>

希望這有助於。

來源

2014-06-06 06:46:43 przno

在$範圍的指令$手錶部件，應該不會是ErrorService.setError代替ErrorService.getError？ –

否。getError返回值，並在$ scope。$ watch中我們想要知道（觀察）服務返回的內容（之前設置的應用程序的其他部分）。 – przno

我忘了提及'clearError'，在點擊關閉按鈕後調用 – przno

AngularJS - 多個控制器的單個警報格

回答

相關問題