angularjs with typescript - cannot access $scope

Question

I am building an angularjs app using typescript, and have just created my first controller - the problem is that I'm having a hard time using ng-model with an object on it.

This is what it all looks like;

app.ts

((): void => {
   'use strict';
   angular.module('app', ['app.core','app.widgets','app.services']);
})();

app.services.ts

User Service is defined here and is not relevant to this sample

'app.widgets.ts`

module app.widgets {
   'use strict';
   interface IUserController {
      User: app.services.IUser;
   }

   class UserController implements IUserController {
      User: app.services.IUser;

      static $inject = ['$scope', 'app.services.UserService'];
      constructor(scope: any, userService: app.services.IUserService){
         var vm = this;
         userService.Find().then((user: app.services.IUser): void => {
            scope.User = user; // this is the offending line
         });
      }
   }

   angular.module('app.widgets').controller('app.widgets.UserController', UserController);
}

I attempt to call this in my HTML like this;

<body ng-app="app" ng-controller="app.widgets.UserController">
   {{ User.UserName }}
</body>

Or ..

<h1 ng-model="User.UserName"></h1>

Update

I haven't quite solved it completely, but I have made more progress

interface IUserControllerScope extends angular.IScope {
   User: app.services.IUser;
}

class UserController {
    static $inject = ['$scope', 'app.services.UserService'];
    constructor($scope: IUserControllerScope, userService: app.services.IUserService) {
       var _this = $scope;
       userService.Find().then((user: app.services.IUser): void => {
             _this.User = user;
          });
       }
    }
}

your constructor is asking for scope, but you are injecting $scope. the $ is essential — Claies
– Claies, Commented Mar 21, 2015 at 20:21

Moses Machua · Accepted Answer · 2015-03-21 20:02:14Z

1

I think the problem is because scope is undefined. Try changing scope to $scope. Then you can access user like this

$scope.User = user

answered Mar 21, 2015 at 20:02

Moses Machua

11.6k3 gold badges39 silver badges56 bronze badges

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

2 Comments

Ciel Over a year ago

I actually made a bit of progress with that, though it wasn't the sole answer.

Ciel Over a year ago

The answer turned out to be that I needed to both declare $scope and I also needed the var _this = $scope so that I could add things to it. I had to make an interface that extended angular.IScope to do this and get type safety.

basarat · Accepted Answer · 2015-03-21 23:16:37Z

1

{{ User.UserName }}

You might have a typo in this line. Try

<pre> {{User | json}} </pre>

I suspect it should be User.username

answered Mar 21, 2015 at 23:16

basarat

278k60 gold badges475 silver badges528 bronze badges

1 Comment

Ciel Over a year ago

UserName is correct. It is from the Microsoft ASP.NET Identity Framework

Pranay Dutta · Accepted Answer · 2015-03-22 04:21:16Z

1

on neat way of doing is not to play with $scope more rather use a instance of controller to assign into a scope variable

class UserController implements IUserController {
  User: app.services.IUser;
  public user:any;
  static $inject = ['$scope', 'app.services.UserService'];
  constructor(scope: any, userService: app.services.IUserService){
     userService.Find().then((user: app.services.IUser): void => {
        this.User = user; // this is the offending line
     });

   //assign instance to a scope variable and access in view
   scope.vm=this
  }
 }

 angular.module('app.widgets').controller('app.widgets.UserController',      UserController);
}

and in view example

   <div>{{vm.user}}</div>

answered Mar 22, 2015 at 4:21

Pranay Dutta

2,5992 gold badges33 silver badges46 bronze badges

Collectives™ on Stack Overflow

angularjs with typescript - cannot access $scope

Update

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related