current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Below the code of my view (the javascript code is in the view, just temp just for testing).

I'd like assign the ASP.NET MVC model (@Model) to the AngularJS scope ($scope.person)

How can I do this ?

Thanks,

The view

@model MyApp.Person

<script>
var myApp = angular.module('myApp', []);

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = ?????
}]);
</script>

Update 1 : I tried this code, in the JS file :

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

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = @Html.Raw(window.person);
}]);

In the view file :

<script>
    @{
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    }
    window.person = serializer.Serialize(Model);
</script>

I get 2 errors : 

ReferenceError: serializer is not defined (on windows)
window.person = serializer.Serialize(Model);

SyntaxError: illegal character (it's the @)
$scope.person = @Html.Raw(window.person);
share|improve this question
    
The 'illegal character' is just an 'false' IntelliSense assumption. When surrounded with '' the error will go away. –  user3153169 16 hours ago

2 Answers 2

up vote 0 down vote accepted 
<script>
    @{
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        var json = serializer.Serialize(Model);
    }
    var myApp = angular.module('myApp', []);

    myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
        $scope.person = @Html.Raw(json);
    }]);
</script>
share|improve this answer
    
Work but only when the code is in the view and not in a separated JS file. –  Kris-I 17 hours ago
    
@Kris-I like Satpal said, //Store data in global variable. –  Jason Li 17 hours ago
    
Take a look at update 1 –  Kris-I 17 hours ago
    
in the js file, $scope.person = window.person; in the view file, window.person = @serializer.Serialize(Model); or put this line in the brackets. –  Jason Li 17 hours ago
    
Reference error on "ReferenceError: serializer is not defined", in the bracket it's worst. –  Kris-I 17 hours ago
up vote 1 down vote

I am not sure if this will work with Angular.

You can use Json.Encode Method converts a data object to a string that is in the JavaScript Object Notation (JSON) format.

window.person = @Html.Raw(Json.Encode(Model)); //Store data in global variable.

In Your angular code use,

$scope.person = window.person

However, Best solution will be to create a service and fetch the person data using the service.

Complete Code

@model MyApp.Person

<script>
window.person = @Html.Raw(Json.Encode(Model)); //Store data in global variable.
var myApp = angular.module('myApp', []);

myApp.controller('personController', ['$scope', '$http', function ($scope, $http) {
    $scope.person = window.person
}]);
</script>
share|improve this answer
    
The question is with angularJS. When I add this line, all the AngularJS code not work anymore. –  Kris-I 17 hours ago
    
@Kris-I, Is your Angular code is in seperate JS file? –  Satpal 17 hours ago
    
Same, AngularJS code not work anymore. The best solution is not use AngularJS I think. –  Kris-I 17 hours ago
    
@Kris-I, Where is your angularjs code in View or seperate JS file? –  Satpal 17 hours ago
    
In the view, it's temp will be move to separated JS file –  Kris-I 17 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.