javascript - Modal Window in Angularjs -

-

i have simple modal show on top of page, , can't seem right angularjs. using chrome plugin angular debugger, has lost track of scope. please me regain scope @ least, or better yet how use modal angular-ui-bootstrap module.

class_details.js

var app = angular.module('classdetails', ['ui.bootstrap']) .config(['$httpprovider', function($httpprovider) {     $httpprovider.defaults.xsrfheadername = 'x-csrftoken'; }]) .controller('classdetailscontroller', ['$scope', '$modal', '$http',      function($scope, $modal, $http) {     $scope.username = 'bob';     $scope.board = {name: "welding", id: 1};     $scope.categories = [{name: "tests", id: 123, weight: 13}]     $scope.openmodal = function(category) {          $modal.open({             animation: false,             templateurl: 'modal-template.html',             controller: 'modalcontrol',             resolve: {                 category: category             }         }).result.then(function (category) {                //post changes              },              function () {/*dismiss no-op*/}         );     }; }]) .controller('modalcontrol', ['$scope', '$modalinstance',     function(scope, $modalinstance, category) {     scope.ok = function () {         $modalinstance.close(category);     };      scope.cancel = function () {         $modalinstance.cancel();     } }]);

html

<html  ng-app="classdetails"> <head>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- bootstrap -->     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">     <link href="/static/css/animate.css" media="screen" rel="stylesheet">      <script type="text/javascript" src="/static/js/utils.js"></script>  </head> <body>     <div ng-controller="classdetailscontroller" class="row">     <div class="col-sm-10">         <h1>             {{ board.name }}             <small style="font-size:16px;">                 <a href="/#">edit</a>             </small>         </h1>     </div>     <div class="col-sm-2">         <a href="#"            class="btn btn-block btn-success" style="margin-top: 30px;">manage grades</a>     </div> </div>  <div class="row">     <div class="col-sm-8">         <h3>             categories             <small style="font-size:12px;">                 <a ng-click="openmodal(null)"                    id="add-category">create new</a>             </small>         </h3>         <table class="table" id="categorytable">             <thead>                 <tr>                     <th class="col-sm-5">name</th>                     <th class="col-sm-3">weight</th>                     <th class="col-sm-2">edit</th>                     <th class="col-sm-2">details</th>                 </tr>             </thead>             <tbody id="categories-table">                 <tr ng-repeat="category in categories" class="category-row" id="{{ category.id }}_row">                     <td class="category-name">{{ category.name }}</td>                     <td class="category-weight">{{ category.weight }}</td>                     <td class="category-edit">                         <a class="btn btn-primary btn-block btn-xs"                            ng-click="openmodal(category)">                            edit                         </a>                     </td>                     <td><a href="#"                            class="btn btn-success btn-block btn-xs">details</a>                     </td>                  </tr>             </tbody>         </table>     </div> </div>    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="/static/js/lib/jquery-ui.min.js"></script> <script type="text/javascript" src="/static/js/lib/angular.min.js"></script> <script type="text/javascript" src="/static/js/lib/angular-resource.min.js"></script> <script type="text/javascript" src="/static/js/lib/angular-route.min.js"></script> <script type="text/javascript" src="/static/js/lib/angular-animate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script> <script src="class_details.js"></script> </body> </html>

sorry superfluous html but, i'm pretty lost right now. , assure modal-template.html. clarify; see happening page rendering of bound variables using '{{' , '}}' batarang see's no active scopes on page. attempt @ recreating page have issue inside application , issue run here seems different in application. in real program modal begins open, , though animation: false in $modal.open function angular fails trying apply modalanimation directive that error message(or that) isolate scope.

maybe version issues here? edit: angularjs version 1.2.26


Comments

Post a Comment

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

-
Image
i have similar problem described in how prevent numbers being changed exponential form in python matplotlib figure : i don't want (in special case) weird scientific formatting of axis. problem different have problem @ z -axis. 2-d plots can use ax.get_yaxis().get_major_formatter().set_useoffset(false) . , there no function ax.get_zaxis() what use format z -axis same way? edit: example: from mpl_toolkits.mplot3d import axes3d import numpy np import sys import matplotlib import matplotlib.pyplot pyplot def func(xi, ti): res = 10e3 + np.cos(ti) * np.sin(xi) return res if __name__ == '__main__': timespacing = 20 timestart = 0 timeend = 1 time = np.linspace(timestart, timeend, timespacing) widthspacing = 50 widthstart = 0 widthend = 3 width = np.linspace(widthstart, widthend, widthspacing) reslist = [] matplotlib.rcparams['legend.fontsize'] = 10 fig = pyplot.figure() ax = fig.gca(projection = '3d...
Read more

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

-
i install web server database on raspberry pi (little computer). computer has 1gb ram. i want know best combination: linux distribution , web server , dbms run local server multiple users minimal latency, use php on server. , best settings performance , not have bugs (memory usage, disable plugin, disable service, etc)? i thought light debian , lighttpd server , sqlite database. solution? i think lighttpd + sqlite great choice. linux distro, debian @ centos or tiny core linux , although i'm not sure of compatibility pi. obviously, can't go wrong raspbian if want use in production , more stable performance, few more pi's , set them in cluster .
Read more

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -

-
i developing app in xamarin android. have splash screen serialize class , pass mainactivity using intent . when try deserialize in mainactivity error message : "serializationexception unable find constructor use types" serialization : void loaddata() { currency currency = new currency(this); intent = new intent(this, typeof(mainactivity)); intent.putextra("currency", newtonsoft.json.jsonconvert.serializeobject(currency)); startactivity(intent); } deserialization : cur = newtonsoft.json.jsonconvert.deserializeobject<currency> (intent.getstringextra("currency")); // error here class constructor : public currency(context context) { thiscontext = context; } i began experiencing problem after added parameter context context constructor. has caused this? how can solve it? possible serialize/deserialize class has parameters? you need have empty constructor in currency class in order deserialize it. ...
Read more