Vinay, you can't hide functions from the scope when using it as this, that
is exactly why the "controller as" syntax comes in so handy. With that
syntax, initialization of your controller goes as foollow:
"<div ng-controller="CountController as CountCtrl" >...</div>" roughly the
following happens "$scope.CountCtrl = new CountController(...dependencies)"
With that, the return object of the constructor function (normally the
'this') will be available on the on the $scope.CountCtrl var, like this:
<div ng-controller="CountController as CountCtrl" >
<p>The count is {{CountCtrl.counter}}</p>
</div>
The beauty of it is:
- Your controller does not even need to know of the $scope - an example
later showcases this (CountController in the example has no dependenices at
all, but i inject the $q just to showcase use of injection with this syntax).
This allows you to reuse controllers from the world of angular in, say,
NodeJS and bring non-angular controllers into your code with few-to-non
modifications needed. You are creating it in a way that is more universal
across all of JS, not specific to one framework.
- Inheritance of $scope is more specific. You can have two of those
controllers in one chain of $scope inheritance by different names and they
will not overshadow one another (see example later). Calls to functions
will be more explicit and much easier to read, once you create a structure
of more then two nested controllers.
Here is the TypeScript used in the example:
http://www.typescriptlang.org/Playground#src=var%20myApp%20%3D%20angular.module('spicyApp1'%2C%20%5B%5D)%3B%0A%0Aclass%20CountController%20%7B%0A%09%0A%09%09public%20counter%3A%20number%20%3D%200%3B%0A%09%0A%09%20%09static%20%24inject%20%3D%20%5B'%24q'%5D%3B%0A%20%20%20%20%20%20%20%20constructor(private%20%24q%3Ang.IQService)%20%7B%0A%09%09%09this.counter%20%3D%2010%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D%0A%09%09%0A%09%09public%20modifyCounter(amount%3Anumber)%7B%0A%09%09%09this.counter%20%2B%3D%20amount%3B%0A%09%09%7D%0A%7D%0A%0AmyApp.controller(%22CountController%22%2C%20CountController)%3B%0A
Here is the plunker that showcases using that transpiled AngularJS
TypeScript controller use
http://plnkr.co/edit/LOgRq5Il6olbuWD7zheU?p=preview
On Wednesday, April 23, 2014 3:07:24 AM UTC+4, Vinay Gangoli wrote:
>
> I know this is an old post, but could you elaborate further on how you
> could encapsulate functions to prevent them from being visible on the scope
> inspite of being in the controller?
> I am using Typescript and cannot find an answer to hiding helper functions
> from the scope when using $scope=this.
>
>
>
>
> On Wednesday, May 29, 2013 5:05:07 AM UTC-7, Alan Klement wrote:
>>
>>
>> A few things for everyone to consider.
>>
>>
>> - Everyone has a different interpretation of what good design and
>> 'best practices' are. This argument shouldn't be used for / against a
>> feature.
>> - Your entire controller is not exposed (if I understand correctly).
>> Don't use the 'this' in syntax 'this.mVariable' to keep methods & data
>> encapsulated.
>> - The syntax 'Ctrl as myCtrl' leads to more explicit code (esp. in
>> the case) as someone else has mentioned here before. Explicit > implicit.
>> - As Lindquist points out in the video, it is more ECMA 6 - like. As
>> an experienced OO programmer, exposing data in this fashion feels very at
>> home. I think other OO programmers moving to Angular / JS will instantly
>> get it.
>> - The existing way still works and (correct me if I'm wrong) even
>> with the new syntax, you can still inject $scope and work that way.
>> - Promoting an easier what to work with nested controllers
>> and segregate data will help contribute to more modular designs.
>> - As Lindquist also points out, you won't run into the issue
>> of accidentally manipulating primitives.
>>
>> Again, the argument of it's not 'good design' isn't enough for me
>> - simply because everyone has a different idea of was 'good design' is.
>>
>> On Thursday, May 23, 2013 9:20:08 PM UTC-4, Ben Clinkinbeard wrote:
>>>
>>> Exposing your entire controller to your views is bad practice IMO.
>>> $scope is a great way to mimic a presentation model/view
>>
>>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
