Question

我想使用自定义angularjs指令和mvc 4表单验证。当我在smile hmtl文件中使用相同的指令时，我运行良好，但我不能使用mvc4

这是我的_layout.cshmtl

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/scripts")
    @Scripts.Render("/scripts/angular-route.js")
     @Scripts.Render("/scripts/angular-messages.js")
    @Scripts.Render("/scripts/loginController.js")
      @Scripts.Render("/scripts/routeConfig.js")


</head>
<body ng-app="MyApp">
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

routeConfig.js

var test=angular
    .module('MyApp', [
    'ngRoute',
    'MyApp.ctrl.crud', 'ngMessages'
    ]);
    test.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

        $routeProvider.when('/', {
            templateUrl: '/Home/Bundle',
            controller: 'loginController'
        });
        $routeProvider.when('/login', {
            templateUrl: '/Home/loginPage',
            controller: 'crudController'
        });
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    }]);
    test.directive('customValidation', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            function validationError(value) {
                if (/[a-zA-z]/.test(value)) {
                    ctrl.$setValidity('invalid', true);
                } else {
                    ctrl.$setValidity('invalid', false)
                }
                if (/[0-9]/.test(value)) {
                    ctrl.$setValidity('invalid', false)
                } else {
                    ctrl.$setValidity('invalid', true)
                }
                return value;
            }
            ctrl.$parsers.push(validationError);
        }
    };
});

部分视图

  <form name="myform" novalidate>
        <table>
            <tr>
                <td>First Name</td>
                <td>
                    <input type="text" required name="firstName" ng-model="name" customvalidation />
                    <span ng-show="myform.firstName.$error">test</span>

                </td>
                <td ng-messages="myform.firstName.$error"><span ng-message="invalid">invalid</span></td>
            </tr>

            <tr>
                <td>Last Name</td>
                <td>
                    <input type="text" required name="lastName" /></td>
            </tr>
            <tr>
                <td>Email</td>
                <td>
                    <input type="email" required name="email" /></td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <input type="password" required name="password" /></td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <input type="password" required name="password" /></td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="submit" /></td>

            </tr>

        </table>

    </form>

自定义指令工作时，我使用的是smile html文件，但是当我使用mvc时它不起作用。

Angularjs自定义指令验证不能与asp.net mvc4一起使用

0 个答案: