CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-strap
msqar
msqar

Reputation: 3020

alert box using angular strap library isn't working for me

Following this example http://plnkr.co/edit/uqSB1gIz6XEmJfC8zHNb?p=preview

And i got it exactly that way and it's not working for me!! :( why??

I'm including the following libraries in my index.htm

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="angular/angular.min.js"></script>


<!-- <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> -->   
<script type="text/javascript" src="bootstrap/js/twitter-bootstrap.min.js"></script>    

<!-- Angular Libraries -->

<script type="text/javascript" src="angular/angular-route.js"></script>
<script type="text/javascript" src="angular/angular-local-storage.js"></script>
<script type="text/javascript" src="angular/ui-bootstrap-tpls-0.7.0.min.js"></script>
<script type="text/javascript" src="angular/angular-strap.js"></script>

<!-- App related libraries -->
<script type="text/javascript" src="js/services/ProductServices.js"></script>
<script type="text/javascript" src="js/controllers/ProductControllers.js"></script>
<script type="text/javascript" src="js/controllers/ModalControllers.js"></script>
<script type="text/javascript" src="js/directives/ProductDirectives.js"></script>

Then from my Controller where i'm creating the module i add the $angular.strap dependency like in the example:

var productApp = angular.module('productApp', ['ngRoute', 'LocalStorageModule', 'ui.bootstrap', '$strap.directives']);

And in the view where the error is being displayed i do this:

<notification ng-model="successAlert"></notification>

From the controller where i set the "successAlert" message, i'm just simply adding a value like this:

$scope.successAlert = data.response;

Now first of all, in the console is throwing this error without even touching anything:

TypeError: Cannot read property 'title' of undefined at Object.fn (http://localhost:8080/RESTFulAngularJS/angular/angular-strap.js:40:35) at f.$digest (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:99:141) at f.$apply (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:101:369) at f (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:67:175) at Q (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:71:99) at XMLHttpRequest.y.onreadystatechange (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:72:130)

And then, when i go into the function that triggers the alert, throws this:

TypeError: Cannot read property 'type' of undefined
    at Object.fn (http://localhost:8080/RESTFulAngularJS/angular/angular-strap.js:45:42)
    at f.$digest (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:99:141)
    at f.$apply (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:101:369)
    at f (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:67:175)
    at Q (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:71:99)
    at XMLHttpRequest.y.onreadystatechange (http://localhost:8080/RESTFulAngularJS/angular/angular.min.js:72:130)

Is there any problem with my libraries? Can you guys help me? Don't know what's wrong really... it's exactly the same way applied as in the example, the same order of script imports... :S

Upvotes: 0

Views: 1161

Answers (1)

Nicolas ABRIC
Nicolas ABRIC

Reputation: 4935

From the error message you have posted I m guessing that your data.response object is undefined and hence your notification will never be shown. If you look closely at the example in the plunker the message object is of form :

{
  "type": "info",
  "title": "Success!",
  "content": "alert directive is working pretty well with 3 sec timeout"
}

And you should respect this. Maybe you could share with us what this data.response should look like and how you are retrieving it.

Upvotes: 2

Related Questions