2016-05-06 11 views
0

私は$http.PostのためにビューからコントローラにURLを渡しています。私のコントローラ(Angularjsコントローラ)ビューからAngularjsコントローラファイルにURLを渡すには?

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

ビュー(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> 

私は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にはかなり新しいので、私が間違っていることを理解できませんでした。

+0

多分、余分な/開始点または終了点がありますか? –

+0

どこで '$ scope.Url'を定義しましたか? – Kyle

+0

@KKKKKKKKここで定義されています。ng-init = "Url = @ Url.Action(" VerifyLogin "、" Visitor ")" – ankur

答えて

2

角度値プロバイダを使用して、このURL(または他のもの)をビューから角度コントローラに渡すことができます。

JavaScriptオブジェクトを作成し、Urlプロパティを作成してthisの値を設定し、値プロバイダを使用してこのオブジェクトを渡します。お使いのコントローラで今

@section Scripts 
{ 
    <script src="~/Scripts/YourAngularControllerFileForThisPage.js"></script> 
    <script> 
     var myApp = myApp || {}; 
     myApp.Settings = myApp.Settings || {}; 
     myApp.Settings.Url= "@Url.Action("VerifyLogin","Visitor")"; 
     angular.module("app").value("appSettings", myApp); 
    </script> 
} 

、単に私は同じ問題を経験してきた、と私のコントローラにUrl.Actionを渡すために値を使用したくなかった

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 
}]); 
0

オブジェクトのappSettingsを使用しています。 Url.Actionの戻り値の最初と最後にアポストロフィを追加すると、この問題が解決されることがわかりました。私はこの拡張機能を書いて、私を助けました。

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