UIB

UIB

关注
发信
关注(28)粉丝(399)

角UI自举不加载

本文介绍了角UI自举不加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我把一切都要从示例页面。基本上没有什么不同，控制器和HTML的身体是从手风琴例如纯粹的复制粘贴

我什么都试过.... 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=应用程序＆GT;
  ＆LT; HEAD＆GT;
    ＆LT;间的charset =UTF-8＆GT;
    ＆LT;标题＆GT;测试与LT; /标题＆GT;＆LT;！ -  CSS文件 - ＆GT;
＆LT;链接rel =stylesheet属性HREF =../../ bower_components /引导/距离/ CSS / bootstrap.min.css＆GT;
＆LT;链接rel =stylesheet属性HREF =../../ bower_components /引导/距离/ CSS /引导-theme.min.css＆GT;＆LT;！ -  JS库 - ＆GT;
＆LT;脚本SRC =../../ bower_components /角/ angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =../../ bower_components /角引导/ UI的引导-tpls.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =../../ bower_components /角动画/角animate.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ - 应用 - ＆GT;
＆LT;脚本＆GT;VAR应用= angular.module（'应用'，['ui.bootstrap']）;
app.controller（'AccordionDemoCtrl'，函数（$范围）{
  $ scope.oneAtATime =真;  $ scope.groups = [
    {
      标题：动态组头 -  1，
      内容：动态组身体 -  1'
    }，
    {
      标题：动态组头 -  2'，
      内容：动态组身体 -  2'
    }
  ];  $ scope.items = ['项目1，项目2，3项'];  $ scope.addItem =功能（）{
    变种newItemNo = $ scope.items.length + 1;
    $ scope.items.push（'项目'+ newItemNo）;
  };  $ scope.status = {
    isFirstOpen：真实，
    isFirstDisabled：假的
  };
}）;
    ＆LT; / SCRIPT＆GT;  ＆LT; /头＆GT;  ＆LT;身体GT;＆LT; D​​IV NG控制器=AccordionDemoCtrl＆GT;
  ＆LT;脚本类型=文/ NG-模板ID =组template.html＆GT;
    ＆LT; D​​IV CLASS =面板{{panelClass ||'面板默认'}}＆GT;
      ＆LT; D​​IV CLASS =面板标题＆GT;
        ＆LT; H4类=面板标题的风格=COLOR：＃fa39c3＆GT;
          ＆LT; A HREF的tabindex =0级=的手风琴切换NG点击=toggleOpen（）UIB-手风琴transclude =标题＆GT;＆LT;跨度
            NG-CLASS ={'文本静音：isDisabled}＆GT; {{标题}}＆LT; / SPAN＆GT;＆LT; / A＆GT;
        ＆LT; / H4＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =面板垮垮UIB崩溃=isOpen会！＆GT;
        ＆LT; D​​IV CLASS =面板体的风格=文本对齐：右NG-transclude＆GT;＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / SCRIPT＆GT;  ＆所述p为H.;
    ＆LT;按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=status.open = status.open！＆GT;最后切换面板＆LT; /按钮＆GT;
    ＆LT;按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=status.isFirstDisabled = status.isFirstDisabled！＆GT;启用/禁用第一个面板和LT; /按钮＆GT;
  ＆所述; / P＆GT;  ＆LT; D​​IV CLASS =复选框＆GT;
    ＆LT;标签＆gt;
      ＆LT;输入类型=复选框NG模型=oneAtATime＆GT;
      打开在同一时间只有一个
    ＆LT; /标签＆gt;
  ＆LT; / DIV＆GT;
  ＆LT; UIB-手风琴近距离他人=oneAtATime＆GT;
    ＆LT; UIB-手风琴组标题=静态头，开始扩大是开=status.isFirstOpen是禁用=status.isFirstDisabled＆GT;
      此内容是直的模板。
    ＆LT; / UIB-手风琴组＆gt;
    ＆LT; UIB-手风琴组标题={{group.title}}NG重复=组群＆GT;
      {{group.content}}
    ＆LT; / UIB-手风琴组＆gt;
    ＆LT; UIB-手风琴组标题=动态正文内容＆GT;
      ＆所述; P＆gt;将UIB-手风琴组的主体生长至适合的内容与所述; / P＆GT;
      ＆LT;按钮式=按钮级=BTN BTN-默认BTN-SMNG点击=的addItem（）＆gt;添加项目＆lt; /按钮＆GT;
      ＆LT; D​​IV NG重复=项中的项目＆GT; {{}项}＆LT; / DIV＆GT;
    ＆LT; / UIB-手风琴组＆gt;
    ＆LT; UIB-手风琴组标题=自定义模板模板URL =组template.html＆GT;
      你好
    ＆LT; / UIB-手风琴组＆gt;
    ＆LT; UIB-手风琴组标题=删除账户面板类=面板危险＆GT;
      ＆LT; P＆gt;请，删除自己的帐户，请点击下面的按钮＆LT; / P＆GT;
      ＆LT;按钮类=BTN BTN-危险＆GT;删除＆LT; /按钮＆GT;
    ＆LT; / UIB-手风琴组＆gt;
    ＆LT; UIB-手风琴组开=status.open＆GT;
      ＆LT; UIB-手风琴标题＆GT;
        我可以有标记，太！ ＆LT; I类=右拉glyphiconNG-CLASS ={'glyphicon雪佛龙下：status.open，glyphicon  - 雪佛龙权！status.open}＆GT;＆LT; / I＆GT;
      ＆LT; / UIB-手风琴标题＆GT;
      这仅仅是一些内容来说明花哨的标题。
    ＆LT; / UIB-手风琴组＆gt;
  ＆LT; / UIB-手风琴＆GT;
＆LT; / DIV＆GT;

```

在补充添加我的亭子依赖性：

 依赖：{
角度：〜1.4.6，
角自举：〜0.13.4
角路线：〜1.4.6
引导：〜3.3.5
jQuery的：〜2.1.4
lodash：〜3.10.1，
角引导开关：〜0.4.1
angularjs滑块：〜0.1.35
角动画：〜1.4.7，
角UI的通知：〜0.0.14
  }


解决方案

在 bower.json ，更新角引导最新： 0.14.2 作为当今

您的例子不工作，因为你复制粘贴在文档中的code：此code有效期为 0.14.x ，但你仍然在 0.13.x 。

如果你想继续使用版本 0.13.4 ，你将不得不删除 UIB - $ P在指令的名称$ PFIX，即：


  • 替换 UIB-手风琴与手风琴

  • 替换 UIB-手风琴组与手风琴组

  • 替换 UIB-手风琴标题与手风琴标题

I take everything from the example page. basically there is nothing different, controller and html body is pure copy paste from accordion example fromhttps://angular-ui.github.io/bootstrap/

I tried everything....

<!doctype html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Test</title>

<!-- CSS files -->
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">

<!-- JS libs -->
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>


<!-- Application -->
<script>

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


app.controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});


    </script>

  </head>

  <body>

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel {{panelClass || 'panel-default'}}">
      <div class="panel-heading">
        <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
      </div>
      <div class="panel-collapse collapse" uib-collapse="!isOpen">
        <div class="panel-body" style="text-align: right" ng-transclude></div>
      </div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </uib-accordion-group>
    <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </uib-accordion-group>
    <uib-accordion-group heading="Dynamic Body Content">
      <p>The body of the uib-accordion group grows to fit the contents</p>
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
    </uib-accordion-group>
    <uib-accordion-group heading="Custom template" template-url="group-template.html">
      Hello
    </uib-accordion-group>
    <uib-accordion-group heading="Delete account" panel-class="panel-danger">
      <p>Please, to delete your account, click the button below</p>
      <button class="btn btn-danger">Delete</button>
    </uib-accordion-group>
    <uib-accordion-group is-open="status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      This is just some content to illustrate fancy headings.
    </uib-accordion-group>
  </uib-accordion>
</div>

```

in complement I add my bower dependency:

  "dependencies": {
"angular": "~1.4.6",
"angular-bootstrap": "~0.13.4",
"angular-route": "~1.4.6",
"bootstrap": "~3.3.5",
"jquery": "~2.1.4",
"lodash": "~3.10.1",
"angular-bootstrap-switch": "~0.4.1",
"angularjs-slider": "~0.1.35",
"angular-animate": "~1.4.7",
"angular-ui-notification": "~0.0.14"
  }
解决方案

In bower.json, update angular-bootstrap to the latest: 0.14.2 as of today.

Your example doesn't work because you copy pasted the code from the documentation: this code is valid for 0.14.x but you are still in 0.13.x.

If you want to stay with version 0.13.4, you will have to remove the uib- prefix in the name of the directives, i.e.:

  • Replace uib-accordion with accordion
  • Replace uib-accordion-group with accordion-group
  • Replace uib-accordion-heading with accordion-heading

这篇关于角UI自举不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-12 17:51
Powered by LMLPHP ©2024 UIB 0.048630