AngularJS bootstrap.ui modal not showing right

Question

I am trying to display a modal dialog using AngularJS bootstrap.ui.When I do a $modal.open(...) appears on the screen line.Before I have problem screen grays out (AngularJS bootstrap.ui modal not showing solved this problem, I added a new bootstrap css I cannot figure out why I don't see any modal screen. I am using Visual Studio 2013, MVC 5, AngularJS 1..2. I am trying to follow this tutorial: http://angular-ui.github.io/bootstrap/; I am getting no error reported from the Javascript console. My app is defined as follows:

 var app = angular.module("app", ["ngGrid", "ui.bootstrap"]);
    app.controller("CtrlController", function ($scope, $http, $log, $modal) {
 $scope.on = function () {
           ....
            var modalInstance=  $modal.open(
                {
                    templateUrl: 'http://localhost:58652/Home/TestView',
                    controller: "CtrlController",

                }
            );

        }

And my markup is:

<div ng-click="on()" class="gridStyle" ng-grid="gridOptions">
</div>
<button ng-click="on()" type=button class="btn">Добавить</button>

My TestView:

<script type="text/ng-template" id="TestView">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a ng-click="selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

Another question: why take html-content
put in

<script type="text/ng-template" id="TestView">

qwetty · Accepted Answer · 2014-11-19 10:06:14Z

0

If You use <script type="text/ng-template" id="TestView"></script> id should be TestView.html (good practice)

Then if You use text/ng-template templateUrl should be equal to id.

In your case templateUrl: 'TestView'

answered Nov 19, 2014 at 10:06

qwetty

1,2682 gold badges11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Denis Over a year ago

I tried this thing ,I have problem Failed to load resource: the server responded with a status of 404 (Not Found) May be because I do not angularjs rouiting?

qwetty Over a year ago

plnkr.co/edit/?p=preview look here. ng-template should be inside your controller. Did you remove http://localhost:58652/Home/ from templateUrl?

Collectives™ on Stack Overflow

AngularJS bootstrap.ui modal not showing right

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related