Question

我试图在我的角度应用程序中添加一个模态，我遵循这个方法：http://jsfiddle.net/dwmkerr/8MVLJ/，来自很多教程，但它对我没用。 base.html文件：

{% load static %}
<!DOCTYPE html>
<html>
<head>

<title>forum</title>
{% block includes_css %}{% endblock %}
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
<link rel="stylesheet" href="{% static "css/base.css" %}">
<script src="{% static "js/angular.min.js" %}"></script>
<script src="{% static "js/angular-file-upload.js" %}"></script>
<script src="{% static "js/angular-file-upload-shim.js" %}"></script>
<script src="{% static "js/angular-cookies.js" %}"></script>
<script src="{% static "js/angular-route.js" %}"></script>
<script src="{% static "js/angular-modal-service.js" %}"></script>
<script src=" http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="{% static "js/crud.js" %}"></script>

{% block includes_js %}{% endblock %} 
</head>

<body ng-app="educ" >
    {% block content %}

    {% endblock %}
</body>
</html>

Crud.js：

var educ = angular.module('educ',['ngCookies', 'angularModalService', 'ui.bootstrap']);

educ.config(function($interpolateProvider) {
   $interpolateProvider.startSymbol('//');
   $interpolateProvider.endSymbol('//');
});
...

我想将模态添加到我的＆＃34; partage＆＃34;应用 partage.js：

educ.controller('ParCtrl', function ($scope,$http,ModalService) {
    $scope.loadfile = function () {
        $http.get('/api-auth/uploads/').then(function (response) {
            $scope.fichs = response.data;
            return response.data;
        });
    };
    $scope.loadfile();
    $scope.loadsubject = function () {
        $http.get('/api-auth/subject/').then(function (response) {
            $scope.subjs = response.data;
            return response.data;
        });
    };
    $scope.loadsubject();

    //modal
    $scope.show = function() {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal();tl
            modal.close.then(function(result) {
                $scope.message = "You said " + result;
            });
        });
    };

});

educ.controller('ModalController', function($scope, close) {

     $scope.close = function(result) {
         close(result, 500);
     };

});

partage.html：

 {% extends "base.html" %}
 {% load staticfiles %}

 {% block includes_js %}
     <script src="{% static "partage/js/partage.js" %}"></script>

 {% endblock %}

 {% block content %}

<div ng-controller="ParCtrl" >
   <h3>Angular Modal Service</h3>
      <a class="btn btn-default"   ng-click="show()">Show a Modal</a>
      <p>{{message}}</p>

  <script type="text/ng-template" id="modal.html">
     <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times; </button>
            <h4 class="modal-title">Yes or No?</h4>
          </div>
          <div class="modal-body">
            <p>It's your call...</p>
          </div>
          <div class="modal-footer">
            <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
 </script>
</div>
 {% endblock %}

Angular Js Bootstrap3模态

0 个答案: