How to pass $scope to controller via ng-click?

Question

So I have the following template:

 <div class="book-thumbs">
   <div class="book-pic" ng-repeat="img in book.images">
     <img ng-src="{{img}}" ng-click="vm.setImage(img)">
   </div>
 </div>

In controller I am trying to invoke setImage(), but I get an error: $scope is not defined.

class BookController {
  constructor($scope, $stateParams, $http) {
    this.name = 'book';
    $scope.bookId = $stateParams.bookId;
    this.getBookInfo($http, $stateParams, $scope);
  }

  getBookInfo($http, $stateParams, $scope) {
    $http.get('books/' + $stateParams.bookId + '.json').success(function(data) {
      $scope.book = data;
      $scope.mainImageUrl = data.images[0];
    });
  }

  setImage(imageUrl) {
    $scope.mainImageUrl = imageUrl;
  }
}

BookController.$inject = ['$scope', '$stateParams', '$http'];
export default BookController;

How can I fix it? If I try to add $scope as a param in setImage($scope, img) nothing changes. Thank you

You're missing this.$scope = $scope; in constructor and in setImage this.$scope.mainImageUrl instead of $scope.mainImageUrl — Ondrej Svejdar
– Ondrej Svejdar, Commented Jun 9, 2016 at 15:28

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-06-09 15:41:18Z

2

Change the way that your access and assign the dependencies in you controller using the this variable in your contructor.

Class BookController {
  constructor($scope, $stateParams, $http) {
    this.name = 'book';
    //Add
    this.$scope = $scope;
    this.$stateParams = $stateParams;
    this.$http = $http;

    this.$scope.bookId = $stateParams.bookId;
    this.getBookInfo();
  }

  getBookInfo() {
    var that = this;
    this.$http.get('books/' + this.$stateParams.bookId + '.json').success(function(data) {
      that.$scope.book = data;
      that.$scope.mainImageUrl = data.images[0];
    });
  }

  setImage(imageUrl) {
    this.$scope.mainImageUrl = imageUrl;
  }
}

BookController.$inject = ['$scope', '$stateParams', '$http'];
export default BookController;

edited Jun 9, 2016 at 15:41

answered Jun 9, 2016 at 15:30

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

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

1 Comment

Gonzalo Pincheira Arancibia Over a year ago

@vp_arth oh! thanks, you're right, i edit the answer.

Naman Kheterpal · Accepted Answer · 2016-06-09 15:36:56Z

1

Try this as ur JS file:

    "use strict";
   var BookController = (function () {
function BookController($scope, $stateParams, $http) {
    this.$scope = $scope;
    this.$stateParams = $stateParams;
    this.$http = $http;
    this.name = "";
    this.name = 'book';
    $scope.bookId = $stateParams.bookId;
    this.getBookInfo($http, $stateParams, $scope);
}
BookController.prototype.getBookInfo = function ($http, $stateParams,   $scope) {
    $http.get('books/' + $stateParams.bookId + '.json').success(function (data) {
        $scope.book = data;
        $scope.mainImageUrl = data.images[0];
    });
};
BookController.prototype.setImage = function (imageUrl) {
    this.$scope.mainImageUrl = imageUrl;
};
return BookController;
}());
BookController.$inject = ['$scope', '$stateParams', '$http'];
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = BookController;

answered Jun 9, 2016 at 15:36

Naman Kheterpal

1,8401 gold badge11 silver badges17 bronze badges

2 Comments

vp_arth Over a year ago

Can you explain two last lines? why not just module.exports = ...?

Naman Kheterpal Over a year ago

you can simply use module.exports as this code is generated by typescript compiler.

Collectives™ on Stack Overflow

How to pass $scope to controller via ng-click?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related