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
Post a Comment