如何将URL从视图传递到Angularjs控制器文件?

时间:2016-05-06 15:29:46

标签: javascript angularjs asp.net-mvc

我将url从视图传递到$http.Post的控制器。

查看(Asp.net MVC视图)

<form  name="form" ng-controller="LoginController" >
    <div id="dvContainer" ng-init="Url= @Url.Action("VerifyLogin", "Visitor")">
        <span ng-model="Message" class="text-danger"></span>
        <table>
            <tr>
                <td>UserName</td>
                <td>
                    <input name="txtUser" type="text" required ng-model="UserName" />
                    <span ng-show="(form.txtUser.$dirty || submitted) &&
                               form.txtUser.$error.required">UserName is required.</span>
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input type="password" required ng-model="Password" /></td>
            </tr>
            <tr>
                <td colspan="2"><button type="submit" ng-click="submit($event)">Login</button></td>
            </tr>
        </table>

    </div>
</form>

在我的控制器(Angularjs控制器)

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

//AngularJS controller
app.controller('LoginController', function ($scope, $http) {
    $scope.submit = function () {
        alert('hi')
        // Set the 'submitted' flag to true
        alert($scope.UserName);
        alert($scope.Password);
        var loginModel = {
            UserName: $scope.UserName,
            PassWord:$scope.Password
        };

        $http.post($scope.Url, loginModel).success(function (data) {
            $scope.Message = data.Message;
        }).error(function (data) {
            $scope.error = "An error has occured while adding! " + data;
        });
    };
});

我正在尝试访问使用ng-init定义的Url。该应用程序正在抛出错误

[$parse:syntax] Syntax Error: Token '/' not a primary expression at column 6 of the expression [Url= /Visitor/VerifyLogin] starting at [/Visitor/VerifyLogin].

我对Angularjs很新,所以无法弄清楚我做错了什么。

2 个答案:

答案 0 :(得分:2)

您可以使用角度值提供程序将此URL(或任何其他内容)从视图传递到角度控制器。

只需创建一个javascript对象并创建一个Url属性并设置其值,并使用值提供程序传递此对象。

var app = angular.module("app", []);
app.controller('ctrl', ['$scope', 'appSettings', function ($scope, appSettings) {
    $scope.URL = 'nothing';
    $scope.greeting = 'Hola!';
    console.log('Url  ', appSettings.Settings.Url);
    // You can use appSettings.Settings.Url for your ajax calls now
}]);

现在在您的控制器中,只需使用appSettings对象

即可
{{1}}

答案 1 :(得分:0)

我遇到了同样的问题,并且不想使用值将Url.Action传递给我的控制器。我发现在Url.Action的返回值的开头和结尾添加一个撇号可以解决问题。我最后写了这个扩展来帮助我:

  public static MvcHtmlString ActionString(this UrlHelper url, string action, string controller, object routeValues)
    {
        return MvcHtmlString.Create("'" + url.Action(action, controller, routeValues) + "'");
    }