Question

我有表单，当用户输入数据并提交数据时，数据应该转到控制器并将字符串转换为JSON对象，然后提交函数并检查条件。如果condition为true，它应该进入工厂服务并创建一个新用户并在控制台中显示详细信息。
如果条件为false，则消息应在控制台中显示为“用户已存在”。问题是它将进入控制器页面，但提交功能未执行
HTML代码

<body ng-app="myApp">

    <div class="container-fluid" ng-controller="createfranctrl as ctrl">

        <form ng-submit="ctrl.submit()"  name="myForm" action="" method="post" class="form-horizontal center-block"  id="create-franchise-form" >
            <fieldset>
                <legend>Create Franchise</legend>
            <div class="form-group">
              <label class="control-label col-sm-2" for="franchisor-name">Franchise Name:</label>
              <div class="col-sm-10">
                  <input type="text" ng-model="ctrl.user.franame" class="form-control" name="franchisor-name" id="franchisor-name" placeholder="Franchisor Name" required pattern="[A-Za-z]{4,}">
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-2" for="franchisor-city">City:</label>
              <div class="col-sm-10">          
                <input type="text" ng-model="ctrl.user.city" class="form-control" name="franchisor-city" id="franchisor-city" placeholder="City" required pattern="[A-Za-z]{4,}">
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-2" for="franchise-name">Name:</label>
              <div class="col-sm-10">          
                <input type="text" ng-model="ctrl.user.name" class="form-control" name="franchise-name" id="franchise-name" placeholder="Name" required pattern="[A-Za-z]{4,}">
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-2" for="franchisor-user-id">User ID:</label>
              <div class="col-sm-10">          
                <input type="number" ng-model="ctrl.user.uid" class="form-control" name="franchisor-user-id" id="franchisor-user-id" placeholder="User ID" required>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-2" for="franchisor-password">Password:</label>
              <div class="col-sm-10">          
                  <input type="password" ng-model="ctrl.user.password" class="form-control" name="franchisor-password" id="franchisor-password" placeholder="Password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,}$" title="password must 1 Capital Letter, 1 Small Letter, 1 Number and min 6 Letters ">
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-2" for="franchisor-mobile">Mobile:</label>
              <div class="col-sm-10">          
                <input type="text" ng-model="ctrl.user.mobile" class="form-control" name="franchisor-mobile" id="franchisor-mobile" placeholder="Mobile Number" required pattern="[789][0-9]{9}" title="Mobile should contain 10 numbers start with 7,8,9" maxlength="10">
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-2" for="franchisor-email">E-Mail:</label>
              <div class="col-sm-10">          
                <input type="email" ng-model="ctrl.user.email" class="form-control" name="franchisor-email" id="franchisor-email" placeholder="E-Mail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
              </div>
            </div>

            <div class="form-group">        
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit"  class="btn btn-success">CREATE</button>
                <button type="reset" class="btn btn-danger">CLEAR</button>
              </div>
            </div>
            </fieldset>    
        </form>
    </div></body>

控制器代码

'use strict';

angular.module('myApp').controller('createfranctrl', ['$scope', 'createservice', function($scope, createservice) {
var self = this;
   self.user={franame:'',city:'',name:'',uid:null,password:'',mobile:'',email:''};
self.user=[];

self.submit = submit;
console.log("loading ctrl file");

function submit() {
    console.log('enter submit function');
    if(self.user.uid===null){
        console.log('Saving New User', self.user);
        createUser(self.user);
    }else{
        console.log('user already exist');
    }
}

   function createUser(user){
    console.log("enter create function");
    createservice.createUser(user);
        }
}]);

工厂代码

'use strict';

angular.module('myApp').factory('createservice', ['$http', '$q', function($http, $q){

var factory = {
    fetchAllUsers: fetchAllUsers,
    createUser: createUser
};

return factory;

function fetchAllUsers() {
    var deferred = $q.defer();
    $http.get(data)
        .then(
        function (response) {
            deferred.resolve(response.data);
        },
        function(errResponse){
            console.log('Error while fetching Users');
            deferred.reject(errResponse);
        }
    );
    return deferred.promise;
}

function createUser(user) {
    console.log('create in service');
    var deferred = $q.defer();
    $http.post(data, user)
        .then(
        function (response) {
            deferred.resolve(response.data);
        },
        function(errResponse){
            console.error('Error while creating User');
            deferred.reject(errResponse);
        }
    );
    return deferred.promise;
}

}]);

Answer 1

您宣布模块的方式不正确。

这是一个有效的plunker。

angular.module('myApp')

应该是

angular.module('myApp', [])

Answer 2

修正了它。删除了属性action=""以阻止页面刷新，并添加了novalidate以禁用HTML检查。

HTML：

<body ng-app="myApp">
    <div class="container-fluid" ng-controller="createfranctrl as ctrl">
        <form ng-submit="ctrl.submit()"  name="myForm" method="post" class="form-horizontal center-block"  id="create-franchise-form" novalidate>
            <fieldset>
                <legend>Create Franchise</legend>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="franchisor-name">Franchise Name:</label>
                    <div class="col-sm-10">
                        <input type="text" ng-model="ctrl.user.franame" class="form-control" name="franchisor-name" id="franchisor-name" placeholder="Franchisor Name" required pattern="[A-Za-z]{4,}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-2" for="franchisor-city">City:</label>
                    <div class="col-sm-10">          
                        <input type="text" ng-model="ctrl.user.city" class="form-control" name="franchisor-city" id="franchisor-city" placeholder="City" required pattern="[A-Za-z]{4,}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-2" for="franchise-name">Name:</label>
                    <div class="col-sm-10">          
                        <input type="text" ng-model="ctrl.user.name" class="form-control" name="franchise-name" id="franchise-name" placeholder="Name" required pattern="[A-Za-z]{4,}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-2" for="franchisor-user-id">User ID:</label>
                    <div class="col-sm-10">          
                        <input type="number" ng-model="ctrl.user.uid" class="form-control" name="franchisor-user-id" id="franchisor-user-id" placeholder="User ID" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-2" for="franchisor-password">Password:</label>
                    <div class="col-sm-10">          
                        <input type="password" ng-model="ctrl.user.password" class="form-control" name="franchisor-password" id="franchisor-password" placeholder="Password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,}$" title="password must 1 Capital Letter, 1 Small Letter, 1 Number and min 6 Letters ">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-2" for="franchisor-mobile">Mobile:</label>
                    <div class="col-sm-10">          
                        <input type="text" ng-model="ctrl.user.mobile" class="form-control" name="franchisor-mobile" id="franchisor-mobile" placeholder="Mobile Number" required pattern="[789][0-9]{9}" title="Mobile should contain 10 numbers start with 7,8,9" maxlength="10">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-2" for="franchisor-email">E-Mail:</label>
                    <div class="col-sm-10">          
                        <input type="email" ng-model="ctrl.user.email" class="form-control" name="franchisor-email" id="franchisor-email" placeholder="E-Mail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
                    </div>
                </div>

                <div class="form-group">        
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit"  class="btn btn-success">CREATE</button>
                        <button type="reset" class="btn btn-danger">CLEAR</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</body>

main.js - 当我们第一次定义模块时，angular.module函数需要2个参数。在此处阅读更多内容：AngularJS.module API reference

'use strict';

angular.module('myApp', []).controller('createfranctrl', ['$scope', 'createservice', function($scope, createservice) {
    var self = this;
    self.user={franame:'',city:'',name:'', uid:null, password:'', mobile:'', email:''};
    self.user=[];

    self.submit = submit;
    console.log("loading ctrl file");

    function submit() {
        console.log('enter submit function');
        if(!self.user.uid){
            console.log('Saving New User', self.user);
            createUser(self.user);
        }else{
            console.log('user already exist');
        }
    }

    function createUser(user){
        console.log("enter create function");
        createservice.createUser(user);
    }
}]);

createservice.js - 工厂文件仅使用angular.module中的1个参数，因为我们只检索以前创建的模块。

'use strict';

angular.module('myApp').factory('createservice', ['$http', '$q', function($http, $q){

var factory = {
    fetchAllUsers: fetchAllUsers,
    createUser: createUser
};

return factory;

function fetchAllUsers() {
    var deferred = $q.defer();
    $http.get(data)
        .then(
        function (response) {
            deferred.resolve(response.data);
        },
        function(errResponse){
            console.log('Error while fetching Users');
            deferred.reject(errResponse);
        }
    );
    return deferred.promise;
}

function createUser(user) {
    console.log('create in service');
    var deferred = $q.defer();
    $http.post(data, user)
        .then(
        function (response) {
            deferred.resolve(response.data);
        },
        function(errResponse){
            console.error('Error while creating User');
            deferred.reject(errResponse);
        }
    );
    return deferred.promise;
}

}]);

提交函数不在angularjs中执行，即使它符合要求

2 个答案: