Attempting to pop a modal window - Using Angular and Bootstrap

Question

First, I am in the beginner stage with Angular, so it would be quite natural to expect that my issues are simple but can't figure our what and where they are.

I have a list of notifications being shown within a ul pair of tags. The body of the notifications would normally be truncated. When the user clicks on a notification, a modal window should pop with the full text of the notification.

Two problems:

1. The modal window is indeed popped, but the body of the notifications is not shown at all, and instead I see

   {{$scope.Display_Notification.text}}
   

2. I get an error message stating the Argument 'ShowNotificationDialog' is not a function, got undefined.

Here is the HTML of the 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">
            This should be the "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 from which the modal window is invoked looks as 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 the 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 the console (Chrome) includes:

:

:

=== Log 1 in OpenNotificationDialog === 

=== Log 2 in OpenNotificationDialog ===

=== Log 1 in ShowNotificationDialog ===

angular.js:11655 Error: [ng:areq] Argument 'ShowNotificationDialog' is not a function, got undefined
http://errors.angularjs.org/1.3.15/ng/areq?p0=ShowNotificationDialog&p1=not%20aNaNunction%2C%20got%20undefined
    at REGEX_STRING_REGEXP (chrome-extension://hcdgjohfmldbigeocpolkcekdojldfcj/vendor/angularjs/angular.js:63:12)
:
:

Answer 1

I guess you are using angular-ui-bootstrap, you should follow their documentation, check out the examples for the modal component:

• https://angular-ui.github.io/bootstrap/#/modal
• http://plnkr.co/edit/?p=preview

AngularJs is a pretty popular framework, most of the time you will find some existing projects that will cover your specific needs.

Other than that, looking at it quickly I have at least a couple of remarks about your code:

• when you are within a view/template, you don't need to specify the $scope on your scope variables. Replace {{$scope.Display_Notification.text}} with {{Display_Notification.text}}

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