1)flash message with AngularJS
$ vi app/assets/javascripts/mymodule.js.erb
myModule.factory("flashService", function ($rootScope) {
var queue = [];
var currentMessage = "";
$rootScope.$on("$routeChangeSuccess", function() {
currentMessage = queue.shift() || "";
});
return {
push: function (msg) {
queue.push(msg);
},
get: function () {
return currentMessage;
}
};
});
*routeChangeSuccess
ref.https://docs.angularjs.org/api/ngRoute/service/$route
2)AngularJS controller "UsersNewCtrl"
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService) {
var msg = "Welcome to the Sample App!";
$scope.user = new userResource();
$scope.submit = function() {
function success(response) {
flashService.push(msg);
$location.path("/users/" + response.id);
}
function failure(response) {
console.log("failure", response)
}
userResource.create($scope.user, success, failure);
};
});
3)AngularJS show view
1.show view
$ vi app/assets/templates/users/show.html.erb
<div ng-controller="UsersShowCtrl">
<div class="row">
<div class="bg-success" ng-show="getMessage()">
<p>{{getMessage()}}</p>
</div>
........2.AngularJS controller "UsersShowCtrl"
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService) {
$scope.user = userResource.show({ id: $routeParams.id });
$scope.getMessage = function() {
return flashService.get();
};
});