Re: [AngularJS] best way of aliasing scope inside HTML?

[Peter Bacon Darwin]

This is what controllers and $watch are for:

myModule.controller('SelectionController', function($scope) {

  $scope.$watch('payment.category[categories.id]', function(value) {

    $scope.selection = value;

  })
});

<div ng-controller="SelectionController">

  Your selection is {{ selection.name }}

</div>

On 19 November 2012 21:52, Mario J. Barchéin <ma...@intelligenia.com> wrote:

Hello.

I have some code that makes this inside an HTML partial:

...

<div ng-init="selection=payment.category[categories.id]">

...

    Your selection is {{ selection.name }}

...

This is made in a complex inclusion of partials via ng-include. These partials use the "selection" attribute created into the scope with ng-init. This works fine, but if I change in the controller $scope.payment using $scope.payment=new Payment(), selection doesn't get redefined, because ng-init evaluates only once and my payment process breaks.

Then, I have done this:

<div>

    {{ selection=payment.category[categories.id] ; "" }}   // note the empty string at the end

    ...

    Your selection is {{ selection.name }}

...

This makes selection always have a reference to the correct payment property, even if I change $scope.payment the same way as before, but it seems an ugly way of doing it. The empty string in the expression is the value returned to the template, so it shows nothing in the same way as ng-init.

Is it fine or you have some better idea of accomplishing this?

Thanks.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Mario J. Barchéin]

Maybe I left out some important information in my previous post, sorry:

The aliasing appears inside an ng-repeat directive in this way:

<div

ng-repeat="category in payment.plan.categories"

class="row"

>

{{ selection = payment.userSelection[category.id] ; '' }}

                // stuff in partials using "selection"

        </div>

So, the $watch in the controller can't be done because I want an scoped "selection" for each of the ng-repeat instances for using it in the partials of the payment process. I think (maybe I'm wrong) that declaring "selection" inside HTML template and not in the controller's $scope is a good idea because it is related only to the processing in the partials and I don't like to put so many properties in the controller $scope. Also, some of those partials are going to be reused in a different controller, so aliasing in HTML seemed a good idea to make them independent from the controller and only change the "main HTML" to create correct aliases for "selection" pinting to the correct controller object.

Maybe some "ng-watch" directive could be useful for this pourpose. What do you think about it?

Thanks.

[Peter Bacon Darwin]

The controller solution still works in combination with ng-repeat:

<div ng-repeat="category in payment.plan.categories" ng-controller="SelectionController">

  Your selection is {{ selection.name }}

</div>

[Mario J. Barchéin]

Great! This is a cleaner solution. Thanks, I didn't know it could be used that way.

function UserSelectionController(

$scope

){

$scope.$watch("payment", function(n, o){

$scope.selection = n.userSelection[$scope.category.id];

});