Открытие AngularJS Modal от $ watch

Question

Я пытаюсь использовать angularjs для веб-сайта, на который нажата кнопка холста, из-за чего открывается мода для загрузки. До сих пор я работал над всем остальным, кроме как модальный. Когда элемент кликается, я получаю сообщение об ошибке: ТипError: Не удается прочитать свойство 'open' of undefined

Может кто-нибудь помочь мне понять, почему open не называется правильно. Спасибо много.

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'); 
    }; 
}); 

Answer 1

Опечатка Ошибка:

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

Должно быть

controller: 'ModalInstanceCtrl', 

Примечание:

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

WORKING EXAMPLE