如何通過ng-click將$ scope傳遞給控制器​​？

Question

所以，我有以下模板：

<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> 

在控制器我試圖調用setImage（），但我得到一個錯誤：沒有定義$範圍。

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; 

我該如何解決？如果我嘗試將$ scope添加爲setImage（$ scope，img）中的參數，則不會有任何更改。謝謝

Answer 1

在您的構造函數中使用this變量更改您訪問和分配控制器中相關性的方式。

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; 

Answer 2

嘗試以此爲烏爾JS文件：

"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;