Как передать данные модели MVC в область видимости контроллера AngularJS?

Question

Как передать данные модели MVC в область видимости контроллера AngularJS?

1

В моем приложении я возвращаю представление ниже, которое использует этот TestViewModel.

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>

но я не совсем уверен, как работают угловые директивы, как я буду писать указанную директиву и как она связывает ее с областью

ljsg 19 апр. 2016, в 16:30

Источник

Теги:

angularjs

asp.net-mvc

angularjs-directive

3 ответа

Ещё вопросы

ljsg · Answer 1 · 2016-04-21T12-10-00.000Z

Итак... Настройка 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);
                }
            }

мое реальное решение выглядит немного иначе, поскольку я использую dataTables ajax call, чтобы вытащить мои json-данные, а затем установить dataSrc с результатом. Использование встроенных вызовов ajax означает, что я могу удалить директивные часы, поскольку datatables обрабатывает это для меня.

Наконец, если вы нашли себя здесь, когда выяснили, как смешивать угловые данные и данные, то эта скрипка мне очень помогла. http://jsfiddle.net/TNy3w/2/

DrinkBird · Answer 2 · 2016-04-21T11-39-00.000Z

Поскольку вы работаете с угловыми, используйте угловую конфигурацию:

<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" в любом месте вашего углового приложения

EDIT: вы можете создать метод расширения, который сериализует вашу модель в 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())')

@ Html.Raw вызывает ошибку для меня, но это идеальный ответ
Проверьте отредактированный ответ :)

Bruno João · Answer 3 · 2016-04-19T12-00-00.000Z

Ваш вопрос отвечает здесь

Вы можете прямо вставлять значения в JavaScript:

//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

я борюсь с этим не с частью сериализации, а с тем, как я устанавливаю область применения этих сериализованных данных. чего я действительно хочу добиться, так это var arrayOfArrays = JSON.parse ('@ Html.Raw (Model.Addresses)'), а затем $ scope.option.aaData = arrayOfArrays
Вы можете создать эту переменную области видимости в вашем контроллере и затем присвоить ей значение. Я думаю, что вы используете DataTables. Если это так, таблица должна обновляться после изменения содержимого массива. В вашем HTML просто используйте {{myVariable = JSON.parse ('@ Html.Raw (Model.Addresses)'); ""}}
В вашем HTML просто используйте {{options.aaData=JSON.parse('@Html.Raw(@Model.Tests)');""}} перед тегом таблицы. Дайте мне знать, если это сработало, поэтому я отредактирую свой ответ.
все еще не повезло, просто на случай, если часть сериализации не работает, я упростил строку, которую вы мне дали {{options.aaData = [["A","B","C"],["1","2","3"]];""}}