angularjs - Angular ui.bootstrap.alert have no styling -
i'm trying out angular ui bootstrap i'm having trouble getting work. want use alert directive.
what have done added following html header:
<link href="stylesheets/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> <script src="javascripts/ui-bootstrap-tpls-0.13.4.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="javascripts/angularapp.js"></script> this html alerts:
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closealert($index)">{{alert.msg}}</alert> i inject dependency ui.bootstrap:
var app = angular.module('e-log', ['ui.router', 'ui.bootstrap']); my controller looks this:
$scope.alerts = []; var addalert = function (type, msg) { $scope.alerts.push({ "type": type, "msg": msg }); }; addalert("success", "a message"); $scope.closealert = function(index) { $scope.alerts.splice(index, 1); } now when load page, html looks this:
<alert ng-repeat="alert in alerts" type="success" close="closealert($index)" class="ng-binding ng-scope">a message</alert> it shows plain text, there's no way close down , has no styling @ all.
what i've tried add plunker , works fine. injecting dependency correctly? use regular bootstrap in code? tips on causing appriceated =)!
edit: edited according advice i've gotten far.
two things:
- you don't use both angular ui bootstrap and bootstrap javascript files together. it's not necessary. want angular ui bootstrap one.
- most importantly, you're using angular 1.2.19 , angular ui bootstrap requires angular 1.3+. see here minimal dependencies.
Comments
Post a Comment