Подтвердить что ты не робот

Как я должен передавать данные с контроллера serveride контроллера AngularJS?

Я столкнулся с тем, что, по моему мнению, является распространенным сценарием, в котором я использую шаблон MVC (в частности, структуру ASP.NET MVC) для веб-приложения с AngularJS на интерфейсе. Моя проблема в том, что у меня есть особое значение, которое является частью модели, передаваемой моему представлению, и я также хочу сделать доступной для моей области Angular controller $, в идеале, как только инициализируется контроллер.

Как это сделать, это вопрос, который задавали и отвечали раньше. Там есть очевидный кандидат: ngInit. Однако в какой-то момент Angular обновлена ​​их документация с тем, что, как представляется, является предупреждением против этой конкретной мысли:

Единственное подходящее использование ngInit - для сглаживания специальных свойств ngRepeat, как показано в демонстрации ниже. Помимо этого случая, вы должны использовать контроллеры вместо ngInit для инициализации значений в области.

Рекомендуемая альтернатива не очень актуальна.

Конечно, есть и другие обходные пути, о которых я могу думать. Например, представление может вставить значение в директиву ngModel на скрытый ввод. Или я мог просто игнорировать предупреждение и использовать ngInit в любом случае. Но любой, о котором я могу думать, является либо уродливым способом сделать то же самое, что и ngInit, либо явно хуже.

В конечном счете тот факт, что то, что кажется очевидным решением для меня, по-видимому, является неправильным, вероятно, является показателем того, что мое мышление не соответствует тем, как предполагается Angular. Поэтому мой вопрос заключается не в том, "как я могу справиться с этим сценарием", а именно:

  • Как я должен заниматься или избегать этого сценария?
  • Почему я не должен использовать ngInit?

Прояснение, так как из первых двух комментариев это не ясно: это для ситуации, когда некоторая или большая часть страницы обслуживается непосредственно как представление MVC, причем только определенная часть функциональности предоставляется Angular. Данные, которые я хочу передать моему контроллеру Angular, уже переданы в представление в модели. Я не хочу, чтобы контроллер Angular затем пошел и должен выполнить свой собственный запрос на сервер, чтобы получить тот же параметр, который уже доступен для представления в другом формате.

4b9b3361

Ответ 1

Вам следует передать его с вашего серверного контроллера на ваш контроллер AngularJS, используя либо "значение", либо "постоянный" поставщик, как описано здесь: https://docs.angularjs.org/guide/providers

Например, вы можете сделать что-то вроде следующего:

<script>
    angular.module("hobbitModule").value("companionship", @Html.Raw(Model));
</script>

а затем введите его в контроллер

var module = angular.module("hobbitModule");
module.controller("CompanionshipController", function($scope, companionship) {
    $scope.companions = companionship;
});

как описано в этой статье: http://blog.mariusschulz.com/2014/03/25/bootstrapping-angularjs-applications-with-server-side-data-from-aspnet-mvc

Если вы считаете, что может оказаться более сложным, что просто значение, вы можете использовать поставщика услуг и вводить это вместо поставщика стоимости.

Ответ 2

предположил, что у вас есть эта модель:
Model

public class Product
{
        public int Id { get; set; }
        public string Name { get; set; }
        public float Price { get; set; }
        public string Description { get; set; }
}

таким образом вы можете передать данные с вашего контроллера в свое мнение:
контроллер

public string GetSerializedProduct()
{
    var products = new[] 
    { 
        new Product{Id=1,Name="product1",Price=4500,Description="description of this product"},
        new Product{Id=2,Name="product2",Price=500,Description="description of this product"},
        new Product{Id=3,Name="product3",Price=400,Description="description of this product"},
        new Product{Id=4,Name="product4",Price=5500,Description="description of this product"},
        new Product{Id=5,Name="product5",Price=66500,Description="description of this product"}
    };
    var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
    return JsonConvert.SerializeObject(products,Formatting.None,settings);
    }
}

Просмотр:

@model string
<div class="container" ng-init="products = @Model">
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-condensed table-hover">
                <tr>
                    <th>Id</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Description</th>
                </tr>
                <tr ng-repeat="product in products">
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                    <td>{{product.description}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>