未定义AnguarJS模态ID

时间:2015-07-16 01:08:01

标签: javascript angularjs twitter-bootstrap

我正在尝试实施AngularJS模式。

这是我对模态的要求

<button data-ng-disabled="!caixa.ativo" data-ng-click="abrir(caixa.id)" class="btn btn-primary btn-xs">Alterar</button>

这是我的功能

$scope.abrir = function(caixaId) {
    var modalInstance = $modal.open({
        templateUrl: 'add_modal',
        controller: $scope.model,
        resolve: {
            id: function() {
                return caixaId;
            }
        }
    });
};

$scope.model = function($scope, $modalInstance) {
    $scope.alerts = [];
    //if I remove this code, the modal opens correctly
    if (angular.isDefined(id))
        alert('edit');
};

但是当我点击按钮时,我收到此错误

Error: id is not defined
$scope.model@http://localhost:8080/websys/resources/js/CaixaController.js:38:1
invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:4182:14
instantiate@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:4190:27
$ControllerProvider/this.$get</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:8449:18
resolveSuccess@http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js:1710:32
processQueue@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:13170:27
scheduleProcessQueue/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:13186:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:14383:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:14199:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:14488:13
ngEventHandler/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:22954:17
m.event.dispatch@http://code.jquery.com/jquery-latest.min.js:3:8384
m.event.add/r.handle@http://code.jquery.com/jquery-latest.min.js:3:5122

1 个答案:

答案 0 :(得分:1)

未定义ID的原因是您没有将id作为依赖项注入控制器。

$scope.abrir = function(caixaId) {
    var modalInstance = $modal.open({
        templateUrl: 'add_modal',
        controller: modalController,
        resolve: {
            // adding id as a property here allows you to inject it
            // into the controller defined below
            id: function() {
                return caixaId;
            }
        }
    });
};

// you don't need to bind this controller to your scope
// you don't need to inject $modalInstance as a dependency here, 
// but you do need to inject id
function modalController($scope, id) {
    $scope.alerts = [];
    // now id should be defined since you added it as a dependency
    if (angular.isDefined(id))
        alert('edit');
};