Question

我正在尝试将angularjs用于一个网站，其中点击了一个画布项目，导致一个bootstrap模式打开。到目前为止，我得到了其他一切工作，除了出现一个模态。单击该项时，我收到错误： TypeError：无法读取未定义的属性“open”

有人可以帮我解释为什么没有正确调用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

从$ watch打开AngularJS模态

1 个答案: