AngularJS Modal Popup

Question

Jestem naprawdę nowy w Angular. Próbuję odtworzyć próbkę modalną pod tym linkiem https://angular-ui.github.io/bootstrap/ Nie mam z tym szczęścia! Stworzyłem plunkera http://plnkr.co/edit/018Ed7RG3Y0GoAlK7a14?p=catalogue Po prostu potrzebuję móc otworzyć modal na kliknięcie przycisku. Otrzymuję błąd z komunikatem o błędzie: [ng: areq] Argument 'ModalDemoCtrl' nie jest funkcją, ale niezdefiniowane

Oto mój widok

<div ng-controller="ModalDemoCtrl"> 
<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body"> 
     <ul> 
      <li ng-repeat="item in items"> 
       <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a> 
      </li> 
     </ul> 
     Selected: <b>{{ selected.item }}</b> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
    </div> 
</script> 
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> 
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> 
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> 
<div ng-show="selected">Selection from a modal: {{ selected }}</div> 

Oto mój kontroler:

angular.module('crm.ma', ['ngAnimate', 'ui.bootstrap']); 
angular.module('crm.ma').controller('ModalDemoCtrl', ModalDemoCtrl, function ($scope, $uibModal, $log) { 

$scope.items = ['item1', 'item2', 'item3']; 

$scope.animationsEnabled = true; 

$scope.open = function (size) { 

    var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     resolve: { 
      items: function() { 
       return $scope.items; 
      } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
}; 

$scope.toggleAnimation = function() { 
    $scope.animationsEnabled = !$scope.animationsEnabled; 
}; 

});

angular.module('crm.ma').controller('ModalInstanceCtrl', ModalInstanceCtrl, function ($scope, $modalInstance, items) { 

$scope.items = items; 
$scope.selected = { 
    item: $scope.items[0] 
}; 

$scope.ok = function() { 
    $modalInstance.close($scope.selected.item); 
}; 

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

Answer 1

Oto poprawiony widelec swojego rzucać: http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview. Po prostu wystąpiły drobne błędy składniowe.

JAVASCRIPT

var app = angular.module('crm.ma', ['ngAnimate', 'ui.bootstrap']); 

app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) { 

$scope.items = ['item1', 'item2', 'item3']; 

$scope.animationsEnabled = true; 

$scope.open = function (size) { 

    var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     resolve: { 
      items: function() { 
       return $scope.items; 
      } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
}; 

    $scope.toggleAnimation = function() { 
    $scope.animationsEnabled = !$scope.animationsEnabled; 
    }; 

}); 

// Please note that $modalInstance represents a modal window (instance) dependency. 
// It is not the same as the $uibModal service used above. 

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

    $scope.items = items; 
    $scope.selected = { 
    item: $scope.items[0] 
    }; 

    $scope.ok = function() { 
    $modalInstance.close($scope.selected.item); 
    }; 

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

HTML

<!DOCTYPE html> 
<html data-ng-app="crm.ma"> 

<head> 
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="style.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.js"></script> 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script> 
<script src="ModalDemoCtrl.js"></script> 
</head> 

<body> 
    <div ng-controller="ModalDemoCtrl"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title">I'm a modal!</h3> 
     </div> 
     <div class="modal-body"> 
     <ul> 
      <li ng-repeat="item in items"> 
       <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a> 
      </li> 
     </ul> 
     Selected: <b>{{ selected.item }}</b> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
    <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> 
    <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> 
    <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> 
    <div ng-show="selected">Selection from a modal: {{ selected }}</div> 
    </div> 
    </body> 

</html> 

Answer 2

trzeba naprawić tę linię:

angular.module('crm.ma').controller('ModalDemoCtrl', ModalDemoCtrl, function ($scope, $uibModal, $log) {  
// what is this, huh? ------------------------------------^ 

poprawny kod:

angular.module('crm.ma').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) { 

masz podobne problemy z ModalInstanceCtrl.

Brak również atrybutu ng-app="crm.ma".

Demo:http://plnkr.co/edit/VDhDAHM2beVtYYsJBXoi?p=preview