current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
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

I created an Angular app that uses Bootstrap. I based the project on a template that I downloaded and studied. I downloaded it from here: https://angularstart.codeplex.com

I did not use or modify the template to create the project that I have now. Instead, I created a new project and used Nuget to download the latest packages for Angular & Bootstrap.

The problem is in my 'Contact' page, which has a form for site visitors to send me a message. I have defined a function - sendMessage - inside the controller which is bound by ng-click to a button in the HTML.

appRoot.controller('ContactController', ['$scope', '$http', function ($scope, $http) {
    $scope.contactModel = {};
    $scope.sendMessage = function () {
        alert('msg: ' + $scope.contactModel.msgSubject);
    }
}]);

<input type="text" id="msgSubject" name="msgSubject" data-ng-model="contactModel.msgSubject" />
<button class="btn btn-primary" ng-click="sendMessage()" >Send Message</button>

The button and click event works fine but inside the function, it cant access the model variable. It returns with an 'undefined' - the alert says "msg: undefined"

I've researched this for three days now. I've looked at other demo code on plunkr and jsfiddle and I've seen it work but something in my setup prevents access to the scope variables (basically my defined model vars).

My angular app.js is:

var appRoot = angular.module('main', ['ngRoute', 'ngResource']);  
appRoot
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', { templateUrl: '/main/home', controller: 'HomeController' })
            .when('/home', { templateUrl: '/main/home', controller: 'HomeController' })
            .when('/contact', { templateUrl: '/main/contact', controller: 'ContactController' })
    }])
    .controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
        $scope.$on('$routeChangeSuccess', function (e, current, previous) {
            $scope.activeViewPath = $location.path();
        });
    }]);

I've tested adding the variable when initializing the contactModel variable:

$scope.contactModel = { msgSubject: 'tst sub' };

The alert inside the 'sendMessage' function sees this and shows "msg: tst sub" correctly.

I've tried different configurations for the ContactController, including passing $location and $resource like so:

appRoot.controller('ContactController', function ($scope, $location, $resource) {

}

but still can't access the scope variables.

In all the samples & demos I've checked out - including the Angular Start tempate - the controller can access the defined ng-model variable. Makes me think it has to be in my configuration or use of the differnt versions of either Angular or Bootstrap.

My _Layout.cshtml defines the default controller and ng-app as so:

<body data-ng-app="main" data-ng-controller="RootController"style="background-color:transparent;" >

Angular version is v1.2.2 and Bootstrap is v3.1.0

Any help is apporeciated. Thanks

share|improve this question
    
I just did copy + paste of your controller code in JSFiddle and it works fine: jsfiddle.net/tomepejo/jGUn5 Plase provide one JSFiddle with the complete example. –  tomepejo Mar 23 '14 at 1:16
    
tomepejo, your JSFiddle is spot on. And it works - which is my problem. Every demo I've seen - including the template project - works. Something in my project config (Angular/Bootstrap) or perhaps the RootController being the default - may be the problem it can't access the scope. –  Ian P Mar 23 '14 at 1:48

1 Answer 1

up vote 0 down vote

I think I've narrowed it down. I'd like to add that I am also using ASP.NET MVC with Razor.

If I put the HTML code outside the @RenderBody() and I put the javascript alert inside the RootController, the code works:

<div >
    <div>
        <input type="text" id="msgSubject" name="msgSubject" data-ng-model="contactModel.msgSubject" />
        <button class="btn btn-primary" ng-click="sendMessage()" >Send Message</button>
    </div>
</div>

<div >
    @RenderBody()
</div>

And the Javascript:

app.controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
    $scope.$on('$routeChangeSuccess', function (e, current, previous) {
        $scope.activeViewPath = $location.path();
    });
    $scope.contactModel = {};
    $scope.sendMessage = function () {
        alert('msg: ' + $scope.contactModel.msgSubject);
    }
}]);

If the HTML is inside the partial view (cshtml), the Angular controller does not see the scope variable as defined by ng-model.

Perhaps Angular execution is blocked by ASP.NET MVC's Razor engine? Something's going on in the @RenderBody() that is probably stripping the functionality out..

share|improve this answer

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.