CODEWITHSUNDEEP
angularjsangular-material
Jeff
Jeff

Reputation: 69

Rating stars inside mdDialog

I'm using jk-rating-stars module with an mdDialog. It works fine, but the on-rating attribute doesn't get called when the rating changes.

Here is my code:

$scope.onItemRating = function(rating) {
    debugger;
    console.log(rating);
    console.log("Hello World");

};

var parentEl = angular.element(document.body);

$mdDialog
    .show({
        parent: parentEl,
        targetEvent: $event,
        template: '<md-dialog>' +
            '<md-dialog-content>' +
            '<jk-rating-stars class="my-custom-stars"  max-rating="5"  rating="rate"  on-rating="onItemRating(rating)"></jk-rating-stars>' +
            '</md-dialog-content>' +
            '</md-dialog>',
        clickOutsideToClose: true,
        escapeToClose: true
    })
    .finally(function() {
        //alert = undefined;
    });

onItemRating is not getting called in the controller. Can you help me solve this issue?

Upvotes: 0

Views: 41

Answers (1)

Omar Einea
Omar Einea

Reputation: 2524

That's probably because the dialog doesn't have access to the scope in which onItemRating is defined.

So, you could either define the method in the dialog's controller like this:

$mdDialog.show({
    controller: function($scope) {
        $scope.onItemRating = function(rating) {
            console.log(rating);
            console.log("Hello World");
        };
    },
    // The rest of your configs...
});


Or you could pass the $scope of the parent controller to the dialog directly, like this:

$mdDialog.show({
    scope: $scope.$new(), // Uses prototypical inheritance to gain access to parent scope
    // The rest of your configs...
});

This was, the dialog would access whatever you define in the parent controller's $scope including your onItemRating function.

Upvotes: 1

Related Questions