Кнопка сглаживания Angularjs

Я пытаюсь запустить простой пример collapse, но он не работает. Ничего не происходит, когда я нажимаю кнопку «Toggle collapse». В консоли у меня нет ошибок. Но в визуальной студии у меня есть только одно предупреждение. Что не так, как это исправить?Кнопка сглаживания Angularjs

_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>

источник

2016-02-25 A191919

Похоже, вы не загрузили ui.bootstrap и загрузили нужные файлы.

Попробуйте установить угловой ui с помощью bower или npm и убедитесь, что вы также добавляете ui.bootstrap в зависимости от вашего приложения (в MyApp.js, так же, как вы добавили ngRoute в качестве зависимости). Добавьте установленную библиотеку в свой пакет-config (угловой). Проверьте в консоли, что все необходимые файлы JavaScript и CSS файлы loded (

Тогда UIB-коллапс будет работать.

Если вы не хотите, чтобы сделать все hazzle добавления этой библиотеки в свой проект , вы всегда можете сделать свой собственный «сбрасываемый» (в данном случае), изменив uib-collapse = «collapsed» на ng-show = «collapsed». Это будет вести себя одинаково для этого случая.

источник

2016-02-25 11:38:49 CmdrTchort

Можете ли вы забыли ui.bootstrap зависимость

var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']);

источник

2016-02-25 11:46:36

Ваш в модуле отсутствует эта инструкция и убедитесь, что ваши ссылки на javascript верны:

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

источник

2016-02-25 12:00:34

Кнопка сглаживания Angularjs

ответ

Смежные вопросы