current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 2 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. – devqon Sep 25 '14 at 7:59
up vote 3 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 Sep 25 '14 at 7:00
    
@Kris-I like Satpal said, //Store data in global variable. – Jason Li Sep 25 '14 at 7:01
    
Take a look at update 1 – Kris-I Sep 25 '14 at 7:17
    
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 Sep 25 '14 at 7:19
    
Reference error on "ReferenceError: serializer is not defined", in the bracket it's worst. – Kris-I Sep 25 '14 at 7:27
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 Sep 25 '14 at 6:48
    
@Kris-I, Is your Angular code is in seperate JS file? – Satpal Sep 25 '14 at 6:49
    
Same, AngularJS code not work anymore. The best solution is not use AngularJS I think. – Kris-I Sep 25 '14 at 6:53
    
@Kris-I, Where is your angularjs code in View or seperate JS file? – Satpal Sep 25 '14 at 6:55
    
In the view, it's temp will be move to separated JS file – Kris-I Sep 25 '14 at 6:56

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.