Question

我是AngularJS的新手，可能会做一些完全错误的事情，因此，请不要严格判断。

我有一张表格：

<form method="post" action="/secured/login_check" id="login-form" submit="loginCheck()" name="loginForm">
    <input type="text" name="_username" ng-model="data.username"/>
    <input type="password" name="_password" ng-model="data.password"/>
    <button class="btn btn-primary" type="submit">Sign in</button>
</form>

我有一个申请表：

var smsApp = angular.module('smsApp', []);

smsApp.controller('LoginCtrl', function($scope) {
    $scope.loginCheck = function() {
        $.ajax({
            url: '/secured/login_check', // here I want to use form action attr value
            data: {
                _username: $scope.data.username,
                _password: $scope.data.password
            },
            success: function(){
                console.log('logged in');
            },
            error: function(){
                console.log('login failed');
            }
        });
    };
});

smsApp.directive('submit', function() {
    return function (scope, element, attrs) {
        element.bind('submit', function() {
            scope.$apply(attrs.submit);
            return false;
        });
    }
});

我的主要问题是：如何将attrs和/或元素传递给$ apply call？或者我怎样才能在$ scope.loginCheck中获取此信息？这是动态设置ajax的url参数。

当然，我可以在loginCheck程序中使用$（'＃login-form'）。attr（'action'），但我相信可以采用更好的方式（“更有棱角的方式”）

我想要使用此属性的原因是它是从PHP应用程序生成的，并且它与开发和生产环境不同。此外，我希望它可以在一个地方配置，而不是在多个地方配置。

P.S。如果你能提供一个完全不同的解决方案，但保持原创的想法，我也会对它感兴趣。

Answer 1

然而，最后，我意识到我的想法在设计上是完全错误的，我现在可以说，我改变了所有内容，如何获得动作attr。

指令很容易实现：

HTML：

<form action="/secured/login_check" my-directive ...other attrs...>
   <!-- ... -->
</form>

JS：

var myDirectives = angular.module('myDirectives', []);

myDirectives.directive('myDirective', ['MyService', function(MyService) {
    var directiveDefinitionObject = {
        restrict: 'A',
        link: function (scope, iElement, iAttrs, controller, transcludeFn) {
            MyService.setAction(iAttrs.action);
        }
    };
    return directiveDefinitionObject;
}]);


var myServices = angular.module('myServices', []);

myServices.factory('MyService', function(){
    var action = '';
    return {
        setAction: function(val) {
            action = val;
        },
        getAction: function() {
            return action;
        }
    };
});

现在，当指令被链接时，MyService被设置为可以通过使用MyService来在AngularJS中的任何地方使用的实际操作属性。它当然需要比jQuery调用更多的行，但最终会迫使你分割MVC部分，并且还会让你思考如何更好地完成这些工作。

P.S。请避免在您的应用程序中使用$ .ajax（）（请参阅：Why use $http in Angular instead of jquery's ajax?）。

AngularJS：如何获取表单操作属性

1 个答案: