CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
deadpickle
deadpickle

Reputation: 126

Opening an AngularJS Modal from $watch

I am trying to use angularjs for a website in which a canvas item is clicked causing a bootstrap modal to open. So far I got everything else working except for a modal to appear. When the item is clicked I get the error: TypeError: Cannot read property 'open' of undefined

Can someone help me figure why open is not being called correctly. Thank you much.

app.controller('contentModalCtrlr', ['$scope', function($scope, $modal) {
$scope.opened = '';

$scope.open = function (template) {
  consloe.log(template);
    var modalInstance = $modal.open({
        templateUrl: template,
        controller: 'ModalInstanceCtrlr',
        size: 'lg'
    });
};

$scope.$watch('opened', function(newValue, oldValue) {
    console.log(newValue,oldValue);

    if (newValue == 'spellcards') {
        console.log('Open a Spell Card Modal!');
        $scope.open('spellcards.html');
    }
    else if (newValue == 'monstercards') {
  console.log('Open a Monster Card Modal!');
  $scope.open('monstercards.html');
}
}); 
console.log($scope);
}]);

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

Upvotes: 0

Views: 1046

Answers (1)

rnrneverdies
rnrneverdies

Reputation: 15647

Typo Error:

var modalInstance = $modal.open({
    templateUrl: template,
    controller: 'ModalInstanceCtrlr', // <-- extra 'r'
    size: 'lg'
});

Should be

controller: 'ModalInstanceCtrl',

Note: 

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

WORKING EXAMPLE

Upvotes: 1

Related Questions