Question

我正在尝试启动collapse的简单示例，但它不起作用。当我点击“切换崩溃”按钮时没有任何反应。在控制台我没有错误。但在视觉工作室我只有一个警告。如何解决它有什么问题？

_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
@* Here  ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner
of AngularJS application*@
<body ng-app="MyApp">
@RenderBody()

@Scripts.Render("~/bundles/jquery")
@* Add Angular Library Here *@
@Scripts.Render("~/bundles/angular")
<script src="~/Scripts/MyApp.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>

BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace AngularJs2
{
public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                "~/Scripts/angular.js",
                "~/Scripts/angular-route.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }
}
}

MyApp.js

(function () {
//Create a Module 
var app = angular.module('MyApp', ['ngRoute']);  // Will use ['ng-Route'] when we will implement routing
//Create a Controller
app.controller('CollapseDemoCtrl', function ($scope) {
    $scope.isCollapsed = false;
});
})();

Index.cshtml

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
    <div class="well well-lg">Some content</div>
</div>
</div>

Answer 1

你可能忘记了ui.bootstrap依赖

select id from user where quality='good'

Answer 2

看起来你还没有加载ui.bootstrap并加载了正确的文件。

尝试使用bower或npm安装angular-ui，并确保将ui.bootstrap作为依赖项添加到您的应用程序中（在MyApp.js中，与添加ngRoute作为依赖项的方式相同）。将已安装的库添加到bundle-config（angular）。在您的控制台中检查所有必需的javascript文件和css文件是否被编码（

然后uib-collapse将起作用。

如果你不想把这个库添加到你的项目中呢？你可以随时制作自己的＆＃34;可折叠的＆＃34; （在这种情况下）通过改变uib-collapse =＆＃34;折叠＆＃34;到ng-show =＆＃34;崩溃＆＃34;。对于这种情况，其行为方式相同。

Answer 3

您的模块缺少这些声明，请确保您的javascript引用正确无误：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

Angularjs折叠按钮

3 个答案: