angularjs - Attempting to pop a modal window - Using Angular and Bootstrap -


first, in diapers stage angular, quite natural expect issues simple can't figure our , theiy are. have list of notifications being shown within ul pair of tags. body of notifications truncated. when user clicks on notification, modal window should pop full text of notification. 2 problems: 1) modal window indeed popped, body of notifications not shown @ all, , instead see

{{$scope.display_notification.text}}

2) error message stating argument 'shownotificationdialog' not function, got undefined.

here html of dialogue:

<script type="text/ng-template" id="show-notification-details.html">     <div class="modal-header">         <h3 class="modal-title">             notification details...         </h3>     </div>     <div class="modal-body"  ng-controller="shownotificationdialog">         <div id="display_notification_body">             should "text" field: >>{{$scope.display_notification.text}}<<         </div>     </div>     <div class="modal-footer">         <div class="btn-group">             <button class="btn btn-primary" style="width:140px" ng-click="dismiss_notification()">dismiss</button>         </div>     </div> </script> 

the controller modal window invoked looks follows:

:  function opennotificationdialog(p_notif,mode) {                  console.log("*** log 1 in opennotificationdialog ***") ;      var text_to_display = p_notif.text ;      $scope.display_notification = p_notif ;      var modalinstance = $modal.open({         templateurl: 'show-notification-details.html',         scope: $scope,         controller: 'extapp.controllers.shownotificationdialog',         size: 'lg',         resolve: {             items: function () {                 return p_notif;             },             p_notif: function() {                 return p_notif ;             }         }     });                  console.log("=== log 2 in opennotificationdialog ===") ;      modalinstance.result.then(function(p_notif) {                  console.log("=== log 3 in opennotificationdialog ===") ;        }, function() {                 console.log("=== log 4 in opennotificationdialog ===") ;       }); } : : 

the controller of modal window looks like:

: : var shownotificationdialog = (function (p_notif) {      function shownotificationdialog($scope, $modalinstance , p_notif ) {                     console.log("*** log 1 in shownotificationdialog ***") ;     }     shownotificationdialog.$inject = ['$scope', '$modalinstance' ];     return shownotificationdialog; })();     : : 

the contents of console (chrome) includes:

:  :  === log 1 in opennotificationdialog ===   === log 2 in opennotificationdialog ===  === log 1 in shownotificationdialog ===  angular.js:11655 error: [ng:areq] argument 'shownotificationdialog' not function, got undefined http://errors.angularjs.org/1.3.15/ng/areq?p0=shownotificationdialog&p1=not%20ananunction%2c%20got%20undefined     @ regex_string_regexp (chrome-extension://hcdgjohfmldbigeocpolkcekdojldfcj/vendor/angularjs/angular.js:63:12) 

: :

last, i'm fighting alreaady long (days!!!). highly appreciated.

i guess using angular-ui-bootstrap, should follow documentation, check out examples modal component:

angularjs pretty popular framework, of time find existing projects cover specific needs.

other that, looking @ have @ least couple of remarks code:

  • when within view/template, don't need specify $scope on scope variables. replace {{$scope.display_notification.text}} {{display_notification.text}}

  • the syntax weird, controllers declared? (check out official documentation: https://docs.angularjs.org/guide/controller)


Comments

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

javascript - oscilloscope of speaker input stops rendering after a few seconds -