1

For some reason $scope.username is not being passed to my controller. On click registerUser() $scope.username is undefined. I do have a scope and the function is running just no $scope.username.

For example:

HTML:

 <input bs-form-control
     type="text"
     ng-model="username"
     label="Username"
     />

<button class="btn btn-primary" ng-click="registerUser()">Register</button>

controller:

    .controller("loginController", ['$scope',
        function ($scope) {
            $scope.registerUser = function(){
                console.log($scope.username) // <=== undefined!
            }

  }])

My controller is passed using state:

.state('register', {
            url: "/register",
            templateUrl: "/static/html/profile/register.html",
            controller: "loginController"
        })
ivarni
  • 17,658
  • 17
  • 76
  • 92
Prometheus
  • 32,405
  • 54
  • 166
  • 302

1 Answers1

2

I think bs-form-control creates a new isolated scope. What you should do is either use objects on your scope (Does my ng-model really need to have a dot to avoid child $scope problems?) or use the new "constroller as" syntax introducted in AngularJS 1.2. It works with ui-router too!

See this plunker: http://plnkr.co/edit/hkmMGbTtURSHDH84miiK?p=preview

Routing:

.state('register', {
    url: "/register",
    templateUrl: "/static/html/profile/register.html",
    controller: "loginController as loginCtrl"
})

Template:

<input bs-form-control type="text" ng-model="loginCtrl.username" label="Username" />
<button class="btn btn-primary" ng-click="loginCtrl.registerUser()">Register</button>

Controller:

Use this instead of $scope:

.controller("loginController", [
    function () {
        this.registerUser = function(){
            console.log(this.username);
        }
    }
])
Community
  • 1
  • 1
Michał Miszczyszyn
  • 11,835
  • 2
  • 35
  • 53
  • Yes when I strip things out it works. bs-panel seems to messy things up, removed it. I will also looked at the DOT issues too – Prometheus Jul 30 '14 at 13:43