javascript 将信息从 Razor 客户端 (cshtml) 传递到 AngularJS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24512313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing information from Razor client (cshtml) to AngularJS
提问by user3794178
I have the following razor file:
我有以下剃刀文件：
@{
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
Here is my angularjs code:
这是我的 angularjs 代码：
var testModule = angular.module("myFooModule", ['ngRoute']);
appetizerModule.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when("/", {
controller: "myController",
templateUrl: "/Templates/test.html"
});
$routeProvider.otherwise({ redirectTo: "/" });
}]);
I would like to pass a variable with data like "myuserinfofromPage" from my razor page to my angularJs so that I can use that data ("myuserinfofromPage") to perform certain set of operations. I am struggling to get a clean way to pass data as I am new to AngularJS. What's the best way to pass simple data from Razor(cshtml) to my Angular code?
我想将一个带有诸如“myuserinfofromPage”之类的数据的变量从我的剃刀页面传递到我的 angularJs，以便我可以使用该数据（“myuserinfofromPage”）来执行某些操作集。由于我是 AngularJS 的新手，我正在努力寻找一种干净的方式来传递数据。将简单数据从 Razor(cshtml) 传递到我的 Angular 代码的最佳方法是什么？
回答by pixelbits
You could embed the following in your razor page:
您可以在剃刀页面中嵌入以下内容：
<script>
app.value('myValue', @Html.Raw(Json.Encode(Model)))
<script>
Where Model is a .NET object you want to render.
其中 Model 是您要渲染的 .NET 对象。
Then inject it into your controller:
然后将其注入您的控制器：
app.controller('ctrl', function($scope, myValue)
{
//use myValue
});
回答by sylwester
You can pass data in json format to you view and after bootstrap your data using factory ie:
您可以将 json 格式的数据传递给您查看，并在使用工厂引导数据后，即：
testModule.factory('UserService', function () {
var _userInfo= @Html.Raw(ViewBag.UserDataInJsonFormat); //<- your data is going here
return {
userInfo : _userInfo
}
}
}
回答by user3794178
Thanks pixelbits and sylwester for your responses. I have used angular directives to pass the element data and stored it in $scope variable in my angular controllers. Reference: http://fdietz.github.io/recipes-with-angular-js/directives/passing-configuration-params-using-html-attributes.html
感谢 pixelbits 和 sylwester 的回复。我使用了 angular 指令来传递元素数据并将其存储在我的 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
};
});
