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

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

转载作者：行者123 更新时间：2023-12-02 15:25:20

我对 angularJS 还很陌生，我似乎找不到一个好方法来显示 Save 方法返回的成功或错误消息。

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 代码:

      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);

                            } ]);

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

最佳答案

你可以使用

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

并且您应该创建一个在更改路线时显示某些内容的服务。您还有其他事件:

$routeChangeSuccess
$routeChangeError
$routeUpdate

关于javascript - 修改方法以显示成功/失败消息。 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33739855/

文章推荐： javascript - 等号 :() doesn't work properly

文章推荐： javascript - 不知道如何解决(Php和Javascript之间)

文章推荐： javascript - PEGjs:请求定义算术函数的帮助/指南

文章推荐： javascript - 在 es6 javascript 中引用 super 上下文

Ruby 方法() 方法
我想了解 Ruby 方法 methods() 是如何工作的。我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。我也看过 ruby-doc.org，但我没有找到这种方法。
VBS教程：方法-Test 方法
Test 方法对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个
VBS教程：方法-Replace 方法
Replace 方法替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。
VBS教程：方法-Raise 方法
Raise 方法生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为
VBS教程：方法-Execute 方法
Execute 方法对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string
VBS教程：方法-Clear 方法
Clear 方法清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。说明在错误处理后，使用 Clear 显式地清除 Err 对象。此
VBS教程：方法-CopyFile 方法
CopyFile 方法将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选
VBS教程：方法-Copy 方法
Copy 方法将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F
VBS教程：方法-Close 方法
Close 方法关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。说明下面例子举例说明如何使用 Close 方
VBS教程：方法-BuildPath 方法
BuildPath 方法向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称
VBS教程：方法-GetFolder 方法
GetFolder 方法返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy
VBS教程：方法-GetFileName 方法
GetFileName 方法返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为
VBS教程：方法-GetFile 方法
GetFile 方法返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject
VBS教程：方法-GetExtensionName 方法
GetExtensionName 方法返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应
VBS教程：方法-GetDriveName 方法
GetDriveName 方法返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec
VBS教程：方法-GetDrive 方法
GetDrive 方法返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO
VBS教程：方法-GetBaseName 方法
GetBaseName 方法返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必
VBS教程：方法-GetAbsolutePathName 方法
GetAbsolutePathName 方法从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object
VBS教程：方法-FolderExists 方法
FolderExists 方法如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项
VBS教程：方法-FileExists 方法
FileExists 方法如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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