AngularJS Modal Popup

Je suis vraiment nouveau Angulaire. Je suis en train de recréer la modale de l'échantillon à ce lien https://angular-ui.github.io/bootstrap/ je vais avoir pas de chance avec elle! J'ai créé un plunker http://plnkr.co/edit/018Ed7RG3Y0GoAlK7a14?p=catalogue j'ai juste besoin d'être en mesure d'ouvrir un modal sur un clic de bouton. J'obtiens le message d'erreur message d'Erreur: [ng:areq] l'Argument 'ModalDemoCtrl" n'est pas une fonction, suis pas défini

Voici mon point de vue

<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>

Voici mon controller:

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');
};
});
votre plunkr est cassé.
désolé à ce sujet. J'ai mis le code dans le index.html fichier. Vous devriez être en mesure de le voir maintenant.
vous devez inclure angular.js & ui-bootstrap.js avant votre script.js
c'est une très petite partie de mon application. Dans le réel de l'application, ils sont tous les deux inclus.

OriginalL'auteur hollyquinn | 2015-10-09

  1. 8

    Voici un corrigé de la fourche de votre plunk: http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview.
    Vous avez juste eu quelques petites erreurs de syntaxe.

    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="[email protected]" 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>
    J'ai changé mon code pour correspondre à la vôtre. Je suis encore en train pas d'erreurs, mais si j'ajoute mon contrôleur <script src="app/components/common/ModalDemoCtrl.js"></script> à la index.html page, il est de retour et sans erreur avec une page vierge. Toute idée de ce que je fais mal?
    Avez-vous ce travail? Désolé, j'ai été absent quelques jours pour les soins médicaux.

    OriginalL'auteur steveo

  2. 5

    Vous avez besoin de fixer cette ligne:

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

    Code Correct:

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

    Vous ont le même problème avec ModalInstanceCtrl.

    Vous manque aussi ng-app="crm.ma" attribut.

    Démo: http://plnkr.co/edit/VDhDAHM2beVtYYsJBXoi?p=preview

    Je fixe la ligne de code, mais ça ne fonctionne toujours pas. ng-app est inclus dans mon application réelle. C'est une énorme demande, je suis juste ajouté les pages que j'ai une question à propos de la Plunker.
    Quelle est l'erreur que vous obtenez?
    ReferenceError: ModalInstanceCtrl n'est pas défini(fonction anonyme) @ ModalDemoCtrl.js:36 angulaire.js:68 Erreur non Interceptée: [$injecteur:modulerr] impossible d'instancier le module crm.ma raison: Erreur: [$injecteur:modulerr] impossible d'instancier module ngAnimate en raison: Erreur: [$injecteur:nomod] Module "ngAnimate" n'est pas disponible! Vous pouvez soit mal orthographié le nom du module ou oublié de le charger. Si l'enregistrement d'un module assurer que vous spécifiez les dépendances comme deuxième argument. merci pour votre aide!
    Est-ce le seul fichier de script que j'ai besoin d'ajouter à index.html modale de travail? <script src="scripts/ui-bootstrap-tpls-0.1.4.0.min.js"></script>
    ModalInstanceCtrl est similaire à ce que j'ai expliqué dans la réponse. Vous avez aussi besoin de modèles, ou mieux 0.14.0/ui-bootstrap-tpls.min.js fichier. Il suffit de cocher la démo que j'ai posté avec code fixe.

    OriginalL'auteur dfsq