$scope object undefined inside ng-view angularjs + asp.net mvc

Question

I want to create a application using asp.net mvc and angular js. I want to use angular routing with asp.net mvc routing. I have created to following application. But there is a problem, i am rendering my views inside ng-view using angular, but when i use $scope objects within the controller it says "undefinded".

Here i have ommited angularjs "#" url navigation using $locationProvider. If i click on the "Route One" link it perfectly navigate to "one.html" view and render it inside ng-view directive. When i click the "Add" button it should display a alert of what i have entered inside the textbox. But instead, alertbox says it is "undefined".

Please tell me what i have missed here. Or what i am doing is wrong or right. Please help me with this. Thank you.

here is my code.

RouteConfig

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "RoutesDemo",
                url: "{*catchall}",
                defaults: new { controller = "Home", action = "Index" });

            routes.MapMvcAttributeRoutes();

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

Home/Index view

<html ng-app="MyApp" ng-controller="MyController">
<head>
    <meta charset="utf-8">
    <base href="/">
</head>
<body>
    <h1>{{heading}}</h1>

    <ul>
        <li><a href="/routeOne">Route One</a></li>
        <li><a href="/routeTwo">Route Two</a></li>
        <li><a href="/routeThree">Route Three</a></li>
    </ul>

    <div ng-view></div>

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/App/app.js"></script>
</body>
</html>

partials/one.html

<h3>One</h3>

<br />

<input type="text" ng-model="item" />
<input type="button" ng-click="add()" value="Add"/>

partials/two.html

<h3>Two</h3>

partials/three.html

<h3>Three</h3>

app.js file

var app = angular.module('MyApp', ['ngRoute'])

    .config(function ($routeProvider,$locationProvider) {

        $routeProvider
            .when('/routeOne', {
                templateUrl: 'partials/one.html'
            })
            .when('/routeTwo', {
                templateUrl: 'partials/two.html'
            })
            .when('/routeThree', {
                templateUrl: 'partials/three.html'
            });

        $locationProvider.html5Mode(true);
    });

app.controller('MyController', function ($scope) {
    $scope.heading = "Page Heading";
    $scope.add = function () {
        //here i cant access the $scope item. it says "undefined"
        alert($scope.item);
    }
})

Håkan Fahlstedt · Accepted Answer · 2015-05-17 13:24:30Z

2

You need to set the controller for the view:

.when('/routeOne', {
                templateUrl: 'partials/one.html',
                controller: 'oneController'
            })

answered May 17, 2015 at 13:24

Håkan Fahlstedt

2,09513 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daybreaker Over a year ago

Perfect answer.. short and simple .I am shame about my self. why didn't i tried that part. seriously.. Thank you very very much. You saved my day.

Daybreaker Over a year ago

can i render asp.net mvc partial view inside ng-view using angular routing instead of html partial views. Just want to know is it possible...

Håkan Fahlstedt Over a year ago

Not sure what you are asking for, but asp.net stuff is handled on the server side and angular stuff on the client side. To use asp.net for view-rendering you have to call the server. Using the $routeProvider never makes calls to the server. Please mark the question answered if it solved your problem.

Collectives™ on Stack Overflow

$scope object undefined inside ng-view angularjs + asp.net mvc

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related