标签: angular-ui-bootstrap

我是angular.js和node-webkit的新手,我正在努力使引导工具提示在通过ng-repeat动态加载的内容中工作.

首先,我尝试使用标准引导程序并执行以下操作:http: //jsfiddle.net/nsDFe/3/

app.directive('bsTooltip', function () {
    return function (scope, element, attrs) {
        // trying to register the new tooltips
        element.find('span').tooltip();
    };
});

这不起作用(但第一个表行中的"通常"定义的工具提示有效).

然后我尝试使用angular-ui bootstrap并做了以下(认为它应该是一种"自动",角度库将听取新的dom元素):http: //jsfiddle.net/XTG8k/2/

但也没有运气.有人能指出我正确的方向吗？我在Stackoverflow上看到了一些关于这方面的讨论,但没有一个真正解决了我的问题.我听说过对$ compile的一些含糊的引用,但是无法想出如何实现它.

这个PLUNKER REFERS

我在ui.bootstrap手风琴中使用ng-Grid时遇到了问题.看看我的Plunker,看看问题在于什么.

基本上,当在初始页面加载时关闭子手风琴组的手风琴中放置网格时,网格的宽度为零并且不显示.

任何人都可以通过调整CSS类或捕获手风琴组事件并重新渲染网格来指明我解决这个问题的方向吗？我一直在用这个圈子跑来跑去!

编辑:道歉,普兰克现在公开!

当我运行我的Karma单元测试时遇到以下错误:

Error: [$injector:unpr] Unknown provider: $attrsProvider <- $attrs
    http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24attrsProvider%20%3C-%20%24attrs
        at /home/ubuntu/vantage/core/static/core/js/lib/angular.js:78:12
        at /home/ubuntu/vantage/core/static/core/js/lib/angular.js:3705:19
        at Object.getService [as get] (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3832:39)
        at /home/ubuntu/vantage/core/static/core/js/lib/angular.js:3710:45
        at getService (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3832:39)
        at invoke (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3859:13)
        at Object.instantiate (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3880:23)
        at /home/ubuntu/vantage/core/static/core/js/lib/angular.js:7134:28
        at null.<anonymous> (/home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:12:20)
        at Object.invoke (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3869:17)
    Error: Declaration Location
        at window.inject.angular.mock.inject (/home/ubuntu/vantage/core/static/core/js/lib/angular-mocks.js:2132:25)
        at null.<anonymous> (/home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:10:20)
        at null.<anonymous> (/home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:5:5)
        at /home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:3:1
    TypeError: Cannot call method 'expectGET' of undefined
        at null.<anonymous> (/home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:380:18)
Chrome 33.0.1750 (Linux): Executed 42 of 45 (1 FAILED) (0 secs / 0.483 secs)
Chrome 33.0.1750 (Linux) Unit Test: …

下面是我的角度代码我没有得到任何错误,模型打开但ModalInstanceCtrl函数cancel()和ok()不想工作,但是如果我完全像控制器那样在angularjs ui-bootstrap (http://angular-ui.github.io/bootstrap/#/modal)指令网站似乎有效.

我使用与网站上的示例相同的HTML,除了我已将内联模板提取到自己的文件,这是有效的.

软件包版本:Bootstrap 3.1.1,AngularJS 1.2.18,UI Bootstrap 0.11.0

我认为问题出在这里我包含控制器可能我没有正确地做到这一点

controller: this.ModalInstanceCtrl,

主App app.js:

'use strict'

angular.module('myApp', ['ui.bootstrap', myAppControllers]);

控制器controllers.js:

'use strict';

var myApp = angular.module('myAppControllers', []);

myApp.controller('ModalCtrl', ['$scope', '$modal', '$log', function($scope, $modal, $log) {


    $scope.open = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'templates/myModalContent.html',
            controller: this.ModalInstanceCtrl,
            size: size,

           }
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
}]);

myApp.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function($scope, $modalInstance) { …

到目前为止,我所拥有的是Angular UI示例:

控制器:

var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl
    });
  };
};


var ModalInstanceCtrl = function ($scope, $modalInstance) {

  $scope.close = function () {
    $modalInstance.dismiss('cancel');
  };
};

而这一部分,就是在这个模态所在的整个页面的.html中.HTML:

<script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
    <button class="btn btn-warning" ng-click="close()">X</button>
  </div>
  <div class="modal-body">
    Stuff
  </div>
</script>

这很好用.但我正在尝试重构一些事情并组织我的代码,所以我想将模态html移动到它自己的文件中.当我这样做,并尝试通过将templateUrl更改为路径:来使用它\tmpl\myModalContent.html,它不会显示.背景仍然出现,检查页面显示它正确加载,但只是不会显示.

我已经尝试根据这些建议改变模态的CSS 而没有区别.

我的问题是,如果脚本标记在主html中,为什么这样可以正常工作,但如果它在自己的文件中则根本不行？

这是一个显示我的意思的plnkr.如果你复制template.html中的内容并将其放在index.html文件中的按钮正上方,它就可以...

我在bootstrap模式中有一个按钮,通过qtip2显示工具提示.工具提示内部是一个输入元素.当模态打开时,我无法获得焦点输入.

这是我的插件:http://plnkr.co/edit/dByd0u？p = preview

HTML:

<button data-toggle="modal" data-target="#MyModal">Modal</button>

  <div id="qtip-content" style="display:none;">
    <input type="text" />
  </div>

  <div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h2 class="modal-title" id="myModalLabel">Bootstrap Modal</h2>
          </div>
          <div class="modal-body" ng-init="modalLoad = true">
            <button qtip="">Show qtip</button>
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
          </div>
      </div>
    </div>  
</div>

我使用该$modal.open({...})方法打开UI-Bootstrap模式.当用户按下后退按钮时,我需要关闭它.

在这种情况下result,该open()方法返回的promise 无用,因为它无法检测由于后退按钮导致的状态更改.现在,当按下后退按钮时,状态会发生变化,但模态会保持打开状态.

基本上我有这个问题的确切问题,但即使它有一个选定的答案,问题也没有解决,从评论中可以看出.这个问题类似,但也没有解决后退按钮问题.

我需要一些方法来检测当前状态是否已从控制器和调用$modalInstance.close()或$scope.$close()方法中发生变化.

我可以监听$stateChangeStart事件并检查fromState参数以有条件地关闭模态.但是,此事件也将不必要地继续为所有后续状态更改而触发.

更新:所以我试着听一下这个事件,并在第一次被解雇时立即取消注册.这样我就可以听到后退按钮状态的变化,然后在我想要的时候停止它.模态的最终代码如下:

$stateProvider.state('itemList.itemNew', {
    url: '/new',
    onEnter: function($state, $modal) {
        $modal.open({
            templateUrl: "/static/partials/item/form.html",
            controller: function($http, $scope, $modalInstance) {
                $scope.editableItem = {};
                $scope.saveItem = function(item) {
                    $http.post('/api/item', item)
                    .success(function(data) {
                        $modalInstance.close(data);
                        alert("Saved Successfully");
                    }).error(function(data) {
                        alert("There was an error.");
                    });
                };
                //Register listener specifically for the back button :(
                deRegister = $scope.$on('$stateChangeSuccess', 
                    function(event, …

我正在使用angular-UI的Carousel,我想从我的控制器触发"prev"和"next"事件.
在Github上有关于它的问题,但它似乎没有实际处理:https://github.com/angular-ui/bootstrap/issues/1836

带有plunker示例的Carousel页面:http://angular-ui.github.io/bootstrap/

关于最佳方法的任何想法？谢谢!

以下代码未显示弹出时间戳.知道怎么解决？

码:

<ul class="dropdown-menu custom-scroll dropDownLabel custom-width" role="menu" aria-labelledby="btn-append-to-body"
                    ng-show="!sr.timedisplay"	
                >
                    <li role="menuitem">
                        <a href="" ng-click="$event.stopPropagation()">Start Time
                           
							<p class="input-group">
								<input type="text" class="form-control" timepicker-popup ng-model="sr.startTime" is-open="opened" timepicker-options="timeOptions" ng-required="true"/>
									<span class="input-group-btn">
										<button class="btn btn-default" ng-click="sr.getTime('startTime')"><i class="glyphicon glyphicon-time"></i></button>
									</span>
								</p>
                        </a>
                    </li></ul>

当我第一次单击“保存”按钮时，警报显示良好。但是，此后每次，除非我进行强制刷新，否则警报不会显示。

这是JSFiddle：JSFiddle

$("#success-alert").hide();
$("#saveChange").click(function showAlert() {
  $("#success-alert").alert();
  $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
    $("#success-alert").alert('close');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
   
<div class="product-options">
  <button id="saveChange" href="javascript:;" class="btn btn-mini">Save</button>
</div>
<div class="alert alert-success" id="success-alert">
  <button type="button" class="close" data-dismiss="alert">x</button>
  <strong>Success! </strong>
  Your changes has saved.
</div>