I'm working on a directive that displays alerts, and I want to set up a timeout function to run whenever the 'show' variable changes. How can I achieve this?
When I tried invoking the link function, all the variables - show, message, and type were undefined after the first time.
Here is the code for the directive:
angular.module('pysFormWebApp')
.directive('alertDirective',
function alertDirective ($timeout) {
return {
restrict : 'E',
scope : {
message : "=",
type : "=",
show : "=",
test : "="
},
controller : function ($scope) {
$scope.closeAlert = function () {
$scope.show = false;
$scope.type = "alert alert-dismissable alert-";
$scope.message = "";
};
$scope.getStrongMessage = function (type) {
var strongMessage = "";
if(type == "success"){
strongMessage = "\xC9xito ! ";
} else if(type == "warning"){
strongMessage = "Cuidado ! ";
return strongMessage;
}
},
link: function(scope, element, attrs) {
scope.$watch(scope.show,
function (newValue) {
console.log(newValue);
},true);
},
templateUrl : "views/utilities/alert.html"
};
});
Here is the HTML code for the directive:
<div ng-show="show">
<div class="alert alert-dismissable alert-{{type}}">
<button type="button" class="close" ng-click="closeAlert()">×</button>
<strong>{{getStrongMessage(type)}}</strong> {{ message | translate }}
</div>
</div>
Example of using the directive in a controller:
$scope.info.alert = {
message: "EXPOTED-SUCCESS",
type: "success",
show : true
};
HTML code snippet using the directive:
<alert-directive message="info.alert.message"
type="info.alert.type"
show="info.alert.show">
</alert-directive>