Question

我有以下剃刀文件：

@{
    ViewBag.Title = "Blah";
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.InitModule = "myFooModule";
}

@section Scripts{
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script src="~/js/recipes.js"></script>
}
<div data-ng-view

这是我的angularjs代码：

var testModule = angular.module("myFooModule", ['ngRoute']);

appetizerModule.config(["$routeProvider", function ($routeProvider) {
    $routeProvider.when("/", {
        controller: "myController",
        templateUrl: "/Templates/test.html"
    });
    $routeProvider.otherwise({ redirectTo: "/" });
}]);

我想传递一个变量，例如＆＃34; myuserinfofromPage＆＃34;从我的剃刀页面到我的angularJs，以便我可以使用该数据（＆＃34; myuserinfofromPage＆＃34;）来执行某些操作。因为我是AngularJS的新手，所以我很难找到一种传递数据的简洁方法。将简单数据从Razor（cshtml）传递给我的Angular代码的最佳方法是什么？

Answer 1

您可以在剃须刀页面中嵌入以下内容：

 <script>
  app.value('myValue', @Html.Raw(Json.Encode(Model)))
 <script>

其中Model是您要渲染的.NET对象。

然后将其注入您的控制器：

 app.controller('ctrl', function($scope, myValue) 
 {
      //use myValue
 });

Answer 2

您可以将json格式的数据传递给您查看，并在使用工厂引导您的数据之后，即：

testModule.factory('UserService', function () {

      var _userInfo= @Html.Raw(ViewBag.UserDataInJsonFormat); //<- your data is going here

      return {
      userInfo : _userInfo

      }

}

Answer 3

感谢pixelbits和sylwester的回复。我使用angular指令传递元素数据并将其存储在我的角度控制器中的$ scope变量中。参考：http://fdietz.github.io/recipes-with-angular-js/directives/passing-configuration-params-using-html-attributes.html

<body ng-app="MyApp">
  <div my-widget="Hello World"></div>
</body>
var app = angular.module("MyApp", []);

app.directive("myWidget", function() {
  var linkFunction = function(scope, element, attributes) {
    scope.text = attributes["myWidget"];
  };

  return {
    restrict: "A",
    template: "<p></p>",
    link: linkFunction
  };
});

将信息从Razor客户端（cshtml）传递到AngularJS

3 个答案: