Reference property in AngularJS class (ControllerAs syntax)

Question

Lately I've been using the ControllerAs syntax, but I'm not sure how I'm able to change a model from my controller within a $watch.

My watch is like this:

$scope.$watch(angular.bind(this, function () {
    return this.allItemsSelected;
}), function (value) {
    //
})

In my view I got a model called pages.selectedItems. pages is the alias for my PagesController.

I've tried $scope.selectedItems, selectedItems andd this.selectedItems so far, but it won't work. Also I've wrapped it in the angular.bind but didn't work as well.

Anybody had this problem as well and can provide a solution?

EDIT

I'm using the checklist-model directive so the model in the ngRepeat is checklist-model="pages.selectedItems". The allItemsSelected variable is a model from a checkbox. If its true I have to loop through my data and add the ids to the selectedItems array.

What type is allItemsSelected? if it is an object use third argument in your watch as true for object equality, if it is an array use watchCollection — PSL
– PSL, Commented Jan 2, 2015 at 16:04
What is allItemsSelected in your case? Can you show us the rest of your controller? The code you've shown us appears to be correct so the problem is surely in something you haven't shown us. — JLRishe
– JLRishe, Commented Jan 2, 2015 at 16:08
@PSL @JLRishe allItemsSelected is a boolean from a checkbox. If its true I have to add all the items in the selectedItems variable as array. — guidsen
– guidsen, Commented Jan 2, 2015 at 16:16
@guidsen So is the issue that the handler function is executing, but you're just not sure how to modify the model? — JLRishe
– JLRishe, Commented Jan 2, 2015 at 16:18
The issue is that in my view with {{pages.selectedItems}} I can see the array being modified, but in my controller I can't modify it for some reason. — guidsen
– guidsen, Commented Jan 2, 2015 at 16:19

JLRishe · Accepted Answer · 2015-01-02 22:41:36Z

Please have a look at the below which I believe should match what you're trying to do.

Note that you'll generally need to use angular.bind() for both of the functions that you pass to $scope.$watch():

angular.module("myModule", ['checklist-model'])
.controller("MyController", ["$scope", function MyController($scope) {
    this.options = ["hello", "goodbye", "bonsoir", "bonne nuit"];

    $scope.$watch(angular.bind(this, function () {
        return this.selectAll;
    }), 
    angular.bind(this, function (value) {
        if (value) {
            this.selectedOptions = angular.copy(this.options);
        }
    }));
}]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="//vitalets.github.io/checklist-model/checklist-model.js"></script>
<div ng-app="myModule" ng-controller="MyController as me">
  <div ng-repeat="item in me.options">
    <input type="checkbox" checklist-model="me.selectedOptions" 
           checklist-value="item" /> {{item}}
  </div>
  <div>
    <input type="checkbox" ng-model="me.selectAll" /> Select all
  </div>
  <div ng-repeat="opt in me.selectedOptions">{{opt}}</div>
</div>

Edit: An alternative to using angular.bind() is to assign this to a variable outside of your anonymous functions, and then use that in place of this within those functions:

angular.module("myModule", ['checklist-model'])
.controller("MyController", ["$scope", function MyController($scope) {
    var self = this;

    this.options = ["hello", "goodbye", "bonsoir", "bonne nuit"];

    $scope.$watch(function () {
        return self.selectAll;
    }, function (value) {
        if (value) {
            self.selectedOptions = angular.copy(self.options);
        }
    });
}]);

Is there any way I can get rid of the angular.bind in the ControllerAs syntax?

Collectives™ on Stack Overflow

Reference property in AngularJS class (ControllerAs syntax)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related