i'm trying add modal angular app, followed methode : http://jsfiddle.net/dwmkerr/8mvlj/ , lot of tutorials didnt work me. 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('//'); }); ...
i want add modal "partage" app 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 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">× </button> <h4 class="modal-title">yes or no?</h4> </div> <div class="modal-body"> <p>it's 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 %}