如何將MVC模型數據傳遞給AngularJS控制器範圍

在我的應用程序中，我返回了使用此TestViewModel的下面的視圖。如何將MVC模型數據傳遞給AngularJS控制器範圍

public class TestViewModel 
{ 
    public List<string> Tests { get; set; } 
}

查看：

@model AdminSite.Models.TestsViewModel 
    @{ 
     ViewBag.Title = "Tests"; 
    } 

    <hgroup class="title"> 
     <h1>@ViewBag.Title</h1> 
    </hgroup> 

    <!doctype html> 
    <html> 
    <head> 
     <script src="~/Scripts/Angular/angular.min.js"></script> 
     <script src="~/Scripts/Angular/Tests.js"></script> 
    </head> 
    <body> 
     <div ng-app="testsTable"> 
      <div ng-controller="TableController"> 
       <table my-table options="options"></table> 
      </div> 
     </div> 
    </body> 
    </html>

正如你可以看到我使用AngularJS創建一個DataTable，我想雖然是代替表中的數據「aaData」被硬編碼，我希望它來自TestViewModel模型。

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

app.directive('myTable', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs, controller) { 
      var dataTable = element.dataTable(scope.options); 
     }, 
     scope: { 
      options: "=" 
     } 
    }; 
}); 


app.controller('TableController', ['$scope', function ($scope) { 
    $scope.options = { 
     aoColumns: [ 
      { 
       "sTitle": "Col 1", 
      }, 
      { 
       "sTitle": "Col 2" 
      }, 
      { 
       "sTitle": "Col 3" 
      } 
     ], 
     aoColumnDefs: [{ 
      "bSortable": true, 
     }], 
     bJQueryUI: true, 
     bDestroy: true, 
     aaData: [ 
      ["A", "B", "C"], 
      ["A", "B", "C"], 

     ] 
    }; 
}]);

我想我可能要創建另一個指令模型如

<table my-table options="options" model-data="@Model.Tests"></table>

綁定，但我真的不知道角指令的工作原理究竟，我怎麼會寫說指令&如何它結合範圍

來源

2016-04-19 ljsg

你的問題回答here

你可以直接注入值轉換成Java腳本：

//View.cshtml 
<script type="text/javascript"> 
    var arrayOfArrays = JSON.parse('@Html.Raw(Model.Addresses)'); 
</script>

見JSON.parse，Html.Raw

另外，您可以通過Ajax獲取值：

public ActionResult GetValues() 
{ 
    // logic 
    // Edit you don't need to serialize it just return the object 

    return Json(new { Addresses: lAddressGeocodeModel }); 
} 

<script type="text/javascript"> 
$(function() { 
    $.ajax({ 
     type: 'POST', 
     url: '@Url.Action("GetValues")', 
     success: function(result) { 
      // do something with result 
     } 
    }); 
}); 
</script>

見jQuery.ajax

來源

2016-04-19 14:22:52 vinagreti

這不是我掙扎與它moreso我如何設置範圍，使用序列化的數據序列化的一部分。我想真正做到什麼 VAR arrayOfArrays = JSON.parse（ '@ Html.Raw（Model.Addresses）'）然後 $ scope.option.aaData = arrayOfArrays – ljsg

你可以在裏面創建此範圍變量您的控制器，然後將值分配給它。我想你正在使用DataTables。如果是這樣，那麼在對數組內容進行cahnge之後，該表應該會更新。在你的HTML中，只需使用{{myVariable = JSON.parse（'@ Html.Raw（Model.Addresses）'）;「」}} – vinagreti

在你的HTML中使用'{{options.aaData = JSON.parse（'@ Html .Raw（@ Model.Tests）'）;「」}}'在表標記之前。讓我知道它是否工作，所以我會編輯我的答案。 – vinagreti

所以...設置aaData使用{{options.aaData=JSON.parse('@Html.Raw(@Model.Tests)');""}}是工作，但我什麼也沒有監視到這個變化，這意味着表格並沒有被新的信息重新繪製。

跟蹤更改我在我的指令中添加了一個監視，這將監視aaData的更改，然後根據需要更新表。

scope.$watch('options.aaData', handleUpdate, true); 
function handleUpdate(newData) { 
       var data = newData || null; 
       if (data) { 
        dataTable.fnClearTable(); 
        dataTable.fnAddData(newData); 
       } 
      }

我真正的解決方案，現在看起來有點不同，因爲我使用的DataTable Ajax調用拉下我的JSON數據使用結果設置DATASRC。使用內置的ajax調用意味着我可以刪除指令手錶，因爲datatables爲我處理這個問題。

最後一點，如果你在找出如何混合angularJS & dataTables的時候發現自己在這裏，那麼這個小提琴幫了我很多。 http://jsfiddle.net/TNy3w/2/

來源

2016-04-21 13:44:05 ljsg

既然你有角的工作，採取的角度配置的優勢：

<script> 
    (function() { 
     angular.module('app').value('mydata', { 
      propOne: '@Url.Action("Index", "Dirty", null)', 
      propTwo: angular.fromJson('@Html.Raw(Model.Addresses)') 
      // more properties here 
     }); 
    })(); 
</script>

然後你可以注入，並使用「MYDATA」內的角應用隨時隨地

編輯：可以創建一個將你的模型序列化爲JSON的擴展方法，那麼只要你提供的參數不爲空，那麼Html.Raw不會給你一個錯誤。

public static class ObjectExtensions { public static string SerializeObject(this object obj) { return JsonConvert.SerializeObject( obj, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() }); } }

然後做：

@using [static extension class namespace here]; ... angular.fromJson('@Html.Raw(Model.Addresses.SerializeObject())')

來源

2016-04-21 13:50:37 DrinkBird

@ Html.Raw對我造成了一個錯誤，但這是一個理想的答案 – Winnemucca

檢查編輯的答案:) – DrinkBird

如何將MVC模型數據傳遞給AngularJS控制器範圍

回答

相關問題