Bootstrap在ng-view中不起作用

时间:2017-07-15 23:30:44

标签: angularjs jquery-ui-datepicker bootstrap-4

我正在使用一个使用MVC和angular进行路由的应用程序。一切正常。我在 ng-view 中使用Bootstrap时看起来有问题。我有一个_Layout.cshtml(布局的基本文件)。

<div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year</p>
        </footer>
</div>
<script src="~/js/plugins/jquery/jquery.min.js"></script>
<script src="~/js/plugins/jquery/jquery-ui.min.js"></script>
<script src="~/js/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/plugins/bootstrap/bootstrap-datepicker.js"></script>                

这只是代码的一部分。 在视图下我有一个主页如下

<div data-ng-non-bindable>
<div id="home" data-ng-controller="rootViewModel">

    <div ng-view >

    </div>

</div>

最后我有一个观点

<div class="page-content-wrap">

<div class="row">
    <div class="col-md-12">
        <!-- START DEFAULT WIZARD -->
        <!-- START WIZARD WITH SUBMIT BUTTON -->
        <div class="block">
            <h4>Register organization</h4>
            <form action="javascript:alert('Submited!');" role="form" class="form-horizontal">
                <div class="wizard show-submit">
                    <ul>
                        <li>
                            <a href="#step-5">
                                <span class="stepNumber">1</span>
                                <span class="stepDesc">User<br /><small>Personal data</small></span>
                            </a>
                        </li>
                        <li>
                            <a href="#step-6">
                                <span class="stepNumber">2</span>
                                <span class="stepDesc">Contact<br /><small>Information</small></span>
                            </a>
                        </li>
                    </ul>
                    <div id="step-5">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title"><strong>One Column</strong> Layout</h3>
                                <ul class="panel-controls">
                                    <li><a href="#" class="panel-remove"><span class="fa fa-times"></span></a></li>
                                </ul>
                            </div>
                            <div class="panel-body">
                                <p>This is non libero bibendum, scelerisque arcu id, placerat nunc. Integer ullamcorper rutrum dui eget porta. Fusce enim dui, pulvinar a augue nec, dapibus hendrerit mauris. Praesent efficitur, elit non convallis faucibus, enim sapien suscipit mi, sit amet fringilla felis arcu id sem. Phasellus semper felis in odio convallis, et venenatis nisl posuere. Morbi non aliquet magna, a consectetur risus. Vivamus quis tellus eros. Nulla sagittis nisi sit amet orci consectetur laoreet. Vivamus volutpat erat ac vulputate laoreet. Phasellus eu ipsum massa.</p>
                            </div>
                            <div class="panel-body">

                                <div class="form-group">
                                    <label class="col-md-3 col-xs-12 control-label">Organization name</label>
                                    <div class="col-md-6 col-xs-12">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                            <input type="text" class="form-control"  data-ng-model="organization.TenantName"/>
                                        </div>
                                        <span class="help-block">The name should be unique, the name should identify your organization</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-xs-12 control-label">Phone number</label>
                                    <div class="col-md-6 col-xs-12">
                                        <div class="input-group">
                                            <span class="input-group-addon" ><span class="fa fa-phone"></span></span>
                                            <input type="text" data-ng-model="organization.PhoneNumber" class="form-control" />
                                        </div>
                                        <span class="help-block">Cell number for primary communication</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 col-xs-12 control-label">Email</label>
                                    <div class="col-md-6 col-xs-12">
                                        <div class="input-group">
                                            <span class="input-group-addon"><span class="fa fa-envelope"></span></span>
                                            <input data-ng-model="organization.Email" type="text" class="form-control" />
                                        </div>
                                        <span class="help-block">Valid email address</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 col-xs-12 control-label">Description</label>
                                    <div class="col-md-6 col-xs-12">
                                        <textarea data-ng-model="organization.Description" class="form-control" rows="5"></textarea>
                                        <span class="help-block">Briefly describe your organization</span>
                                    </div>
                                </div>





                                <div class="form-group">
                                    <label class="col-md-3 col-xs-12 control-label">Logo</label>
                                    <div class="col-md-6 col-xs-12">
                                        <input data-ng-model="organization.Logo" type="file" class="fileinput btn-primary" name="filename" id="filename" title="Browse file" />
                                        <span class="help-block">Input type file</span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-md-3 col-xs-12 control-label">Visibility</label>
                                    <div class="col-md-6 col-xs-12">
                                        <label class="check"><input id="toggle-one" data-ng-model="organization.IsPublic" ng-checked="organization.IsPublic" type="checkbox" class="icheckbox" checked="checked" /> Checkbox title</label>
                                        <span class="help-block">To be visible to every one online check this box</span>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <button class="btn btn-default">Clear Form</button>
                                <button class="btn btn-primary pull-right">Submit</button>
                            </div>
                        </div>
                    </div>
                    <div id="step-6">
                       <!--Select license data-->
                    </div>
                </div>
            </form>
        </div>
        <!-- END WIZARD WITH SUBMIT BUTTON -->
    </div>
</div>

此视图不会加载布局中引用的datepicker引导程序,但css和angular控制器工作正常。但当我删除视图并将其直接放到我的homepage.cshtml它工作正常。问题是ng-view。任何帮助将不胜感激。感谢

0 个答案:

没有答案