Question

我是angularJS的新手，我似乎无法找到一个很好的方法来显示返回我的Save方法的SUCCESS或ERROR消息。

继承html代码：

<form role="form">
<div class="panel-body">

    <div class="panel-body">
        <img src="/assets/doge.jpg" alt="Doge">
    </div>

    <div class="container">
        <div class="input-group">
            <span class="input-group-addon" id="tec-nombre">Nombre del
                Tecnico:</span><input type="text" class="form-control"
                data-ng-model="tecnico.nombre" aria-describedby="tec-nombre">
            <div role="alert">
                <span class="error"
                    data-ng-show="myForm.nombreTecnico.$error.required">
                    Required!</span>
            </div>
        </div>
        <div class="input-group">
            <span class="input-group-addon" id="tec-legajo">Legajo del
                Tecnico:</span><input type="number" class="form-control"
                data-ng-model="tecnico.legajo" aria-describedby="tec-legajo">
            <div role="alert">
                <span class="error"
                    data-ng-show="myForm.legajoTecnico.$error.required">
                    Required!</span>
            </div>
        </div>
        <div class="input-group">
            <span class="input-group-addon" id="tec-email">Email del
                Tecnico:</span><input type="email" class="form-control"
                data-ng-model="tecnico.email" aria-describedby="tec-email">
            <div role="alert">
                <span class="error"
                    data-ng-show="myForm.emailTecnico.$error.required">
                    Required!</span>
            </div>
        </div>
        <div class="input-group">
            <span class="input-group-addon" id="tec-interno">Interno del
                Tecnico:</span><input type="text" class="form-control"
                data-ng-model="tecnico.interno" aria-describedby="tec-interno">
            <div role="alert">
                <span class="error"
                    data-ng-show="myForm.nombreTecnico.$error.required">
                    Required!</span>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-md-2"></label>
    <div class="col-md-4">
        <a href="#/" class="btn">Cancel</a>
        <a data-ng-click="saveTecnico(tecnico);" href="#/test" class="btn btn-primary">Actualizar
            {{tecnico.legajo}}</a>
        <button data-ng-click="deleteCustomer(customer)"
            data-ng-show="customer._id" class="btn btn-warning">Delete</button>
    </div>
</div>

以下是Angular Code：

      angular.module('incidente', [ 'ngRoute' , 'ui.tree' ])

    .config([ '$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl : 'partials/home.html'
        }).when('/incidente/:codename', {
            templateUrl : 'partials/incidente.html',
            controller : 'IncidenteController'
        }).when('/incidentes', {
            templateUrl : 'partials/incidentes.html',
            controller : 'IncidentesController'
        }).when('/tecnicos', {
            templateUrl : 'partials/tecnicos.html',
            controller : 'TecnicosController'
        }).when('/tecnico/:legajo', {
            templateUrl : 'partials/tecnico.html',
            controller : 'TecnicoController'
        }).when('/sistema/:nombre', {
            templateUrl : 'partials/sistema.html',
            controller : 'SistemaController'
        }).when('/sistemas', {
            templateUrl : 'partials/sistemas.html',
            controller : 'SistemasController'
        }).when('/hardware/:codename', {
            templateUrl : 'hardware.html',
            controller : 'HardwareController'
        }).when('/hardwares', {
            templateUrl : 'partials/hardwares.html',
            controller : 'HardwaresController'
        }).when('/software/:codename', {
            templateUrl : 'partials/software.html',
            controller : 'SoftwareController'
        }).when('/softwares', {
            templateUrl : 'partials/softwares.html',
            controller : 'SoftwaresController'
        }).when('/readme', {
            templateUrl : 'partials/readme.html',
            controller : ''
        }).when('/test', {
            templateUrl : '/partials/tecnicos.html',
            controller : 'TecnicosController'
        }).otherwise({
            redirectTo : '/'
        });
    } ])

    .controller('home', function($scope, $http) {
        $http.get('/resource/').success(function(data) {
            $scope.greeting = data;
        })
    })

    .controller(
            'navigation',

            function($rootScope, $scope, $http, $location) {

                var authenticate = function(credentials, callback) {

                    var headers = credentials ? {
                        authorization : "Basic "
                                + btoa(credentials.username + ":"
                                        + credentials.password)
                    } : {};

                    $http.get('user', {
                        headers : headers
                    }).success(function(data) {
                        if (data.name) {
                            $rootScope.authenticated = true;
                        } else {
                            $rootScope.authenticated = false;
                        }
                        callback && callback();
                    }).error(function() {
                        $rootScope.authenticated = false;
                        callback && callback();
                    });

                }

                authenticate();
                $scope.credentials = {};
                $scope.login = function() {
                    authenticate($scope.credentials, function() {
                        if ($rootScope.authenticated) {
                            $location.path("/");
                            $scope.error = false;
                        } else {
                            $location.path("/login");
                            $scope.error = true;
                        }
                    });
                };
            })

            .controller(
                    'IncidenteController',
                    [
                            '$scope',
                            '$http',
                            '$routeParams',
                            function($scope, $http, $routeParams) {

                                var urlbase = "http://localhost:8080/";

                                var onError = function(reason) {
                                    $scope.error = "No se pudo encontrar";
                                };

                                var code = $routeParams.codename;

                                console.log(code);

                                var onIncidenteComplete = function(response) {

                                    try {
                                        $scope.incidente = response.data;
                                    } catch (error) {
                                        console.error(error);
                                    }
                                };

                                $http.get(urlbase + "get/incidente/" + code).then(
                                        onIncidenteComplete, onError);

                                $scope.saveIncidente = function(incidente) {
                                    console.log(incidente);
                                    return $http.post(urlbase + "set/incidente/" + incidente)
                                };

                            } ])

            .controller(
                    'IncidentesController',
                    [
                            '$scope',
                            '$http',
                            function($scope, $http) {

                                var urlbase = "http://localhost:8080/";

                                var onError = function(reason) {
                                    $scope.error = "No se pudo encontrar";
                                };

                                var onIncidenteComplete = function(response) {

                                    try {
                                        $scope.incidentes = angular
                                                .fromJson(response.data);
                                        console.log($scope.incidentes);
                                    } catch (error) {
                                        console.error(error);
                                    }
                                };

                                $http.get(urlbase + "get/incidente/").then(
                                        onIncidenteComplete, onError);

                            } ])

            .controller(
                    'TecnicoController',
                    [
                        '$scope',
                        '$http',
                        '$routeParams',
                        function($scope, $http, $routeParams) {

                                var onError = function(reason) {
                                    $scope.error = "No se pudo encontrar";
                                };

                                var urlbase = "http://localhost:8080/";

                                var legajo = $routeParams.legajo;

                                var onTecnicoComplete = function(response) {
                                    try {
                                    $scope.tecnico = response.data;
                                    } catch (error) {
                                        console.error(error);
                                    }
                                };

                                $http.get(urlbase + "get/tecnico/" + legajo)
                                        .then(onTecnicoComplete, onError);

                                $scope.saveTecnico = function(tecnico) {
                                    return $http.post(urlbase + "set/tecnico/", tecnico)
                                };
                                This is the function that saves the tecnico and should show the error/success message.
                            } ])

            .controller(
                    'TecnicosController',
                    [
                            '$scope',
                            '$http',
                            function($scope, $http) {

                                var onError = function(reason) {
                                    $scope.error = "No se pudo encontrar";
                                };

                                var onTecnicoComplete = function(response) {
                                    $scope.tecnicos = response.data;
                                };

                                $http.get("http://localhost:8080/get/tecnico/")
                                        .then(onTecnicoComplete, onError);

                            } ])

            .controller(
                    'SistemasController',
                    [
                            '$scope',
                            '$http',
                            function($scope, $http) {

                                var urlbase = "http://localhost:8080/get/";

                                var onError = function(reason) {
                                    $scope.error = "No se pudo encontrar";
                                };

                                var onSistemaComplete = function(response) {
                                    $scope.sistemas = response.data;
                                };

                                $http.get(urlbase + "sistema/").then(
                                        onSistemaComplete, onError);

                            } ]);

到目前为止只是一个重定向，但我希望在重定向之前显示成功或错误消息，以帮助用户了解发生的情况。

Answer 1

你可以使用

    $scope.$on('$routeChangeStart', function(next, current) { 
   ... you could trigger something here ...
 });

你应该创建一个在changine路由时显示内容的服务。您还有其他活动：

$ routeChangeSuccess
$ routeChangeError
$路由更新

修改方法以显示成功/失败消息。 AngularJS

1 个答案: