Is it possible to let Angularjs work with prototype methods and variables

Question

You know, in angularjs, most of logical are based on $scope:

function Ctrl($scope) {
    $scope.name = "Freewind";
    $scope.hello = function() {
       alert($scope.name);
    }
    $scope.method1 = function() {}
    $scope.method2 = function() {}
    $scope.method3 = function() {}
    $scope.method4 = function() {}
    $scope.method5 = function() {}
}

Now I'm using haxe to generate angularjs code, it works if my code is:

class Ctrl {
   public function new(scope:Scope) {
      scope.name = "Freewind";
      scope.hello = function() {
         alert(scope.name);
      }
      scope.method1 = function() {}
      scope.method2 = function() {}
      scope.method3 = function() {}
      scope.method4 = function() {}
      scope.method5 = function() {}
   }
}

typedef Scope = {
    name:String,
    hello:Void->Void,
    method1: Void->Void,
    method2: Void->Void,
    method3: Void->Void,
    method4: Void->Void,
    method5: Void->Void
}

But I want to be benefited from haxe's class system(the code may be simpler and clearer), to declare it like:

class Scope {
    public var name:String;
    public function hello() {}
    public function method1() {}
    public function method2() {}
    public function method3() {}
    public function method4() {}
    public function method5() {}
}

Then find a way to associate the Scope class with the $scope of angularjs.

But the generated Scope from haxe are using prototypes:

Scope = function();
Scope.prototype.name = "something";
Scope.prototype.hello = function() {}
Scope.prototype.method1 = function() {}
Scope.prototype.method2 = function() {}
Scope.prototype.method3 = function() {}
Scope.prototype.method4 = function() {}
Scope.prototype.method5 = function() {}

In this case, I can't find a solution to let angularjs work with it.

Is it possible to let angularjs to work with prototypes, so it can work with haxe class system (also other languages like coffeescript/typescript which have class support)?

there is no purpose doing that , if you want reusable bits of code , move your methods into services. What angularJS calls controler is not the MVC controller , it is a ViewModel in the MVVM design pattern. true controllers are in directives. — mpm
– mpm, Commented Jan 18, 2013 at 11:10

back2dos · Accepted Answer · 2013-01-22 17:10:36Z

2

For the sake of having an actual answer to this question, one should mention that now this library solves the problem: https://github.com/freewind/HaxeAngularSupport ;)

answered Jan 22, 2013 at 17:10

back2dos

15.6k36 silver badges52 bronze badges

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

3 Comments

Freewind Over a year ago

After using this macro for 2 days, I don't recommend it anymore. When I write code in that way, I can't stop thinking "what the js code it will generate? Is it correct"? It's too tired. And also found small errors it introduced, which may be fixed, but we need more rules for coding.

back2dos Over a year ago

@Freewind: If you want this library to work, you will need to invest time and test it in the field. You shouldn't give up after a few days. Considering how young the library is and how new you are to macros, it is in a respectable shape. You need to refine it and - most importantly - add tests. That way you will know it is correct. Making this a solid piece of software is an attainable goal.

Freewind Over a year ago

thanks for your advice. I'm waiting for that haxe bug to be fixed, then try my first approach.

Ben Lesh · Accepted Answer · 2013-01-18 14:33:01Z

Scope's constructor is declared within a closure, so you don't have easy access to it... BUT(!) JavaScript has the constructor available to you right off of any existing object.

Theoretically, you could get the $rootScope's constructor, alter it's prototype, and that should alter any subsequently created Scopes. You'd probably want to do this in the .run() or .config() on your application module, however.

app.run(function($rootScope) {
   $rootScope.constructor.prototype.foo = 'Set from prototype';
});

It works and here's the plunker.

HOWEVER: You probably don't need to do this. The only reason I could think of that you might need to do this is in some edge-case where you needed to make sure some function or property was available on a scope, even if it was an isolated scope (as was the one in the directive in the plunker I linked).

Because there is scope inheritance, and because you have $rootScope to use, I can't really think of any valid reason to need to alter Scope via prototyping.

Collectives™ on Stack Overflow

Is it possible to let Angularjs work with prototype methods and variables

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related