标签: angular-ui-bootstrap

我正在尝试使用ui-bootstrap 0.6的模态指令

这是ui-bootstrap页面中的工作默认plunker:

http://plnkr.co/edit/JGBiBSeRqOnwRhYA9py8?p=preview

现在,我试图使编码风格适合angular-seed风格,将其包含在一个应用程序中,如下所示:

http://plnkr.co/edit/Y59rwlcNpQdijKtmjOPy?p=preview

angular.module('MyModal', ['ui.bootstrap', 'MyModal.controllers']);

angular.module('MyModal.controllers', [])
    .controller('ModalDemoCtrl', [ '$scope', '$modal', '$log', function ($scope, $modal, $log) {
    $scope.items = ['item1', 'item2', 'item3'];

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

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

通过Yeoman开始一个新的Angular项目询问你是否想要包含Twitter Bootstrap(我正在使用Sass风味).这样做包括样式和脚本.但是,我想使用UI Bootstrap而不是Bootstrap的脚本(依赖于jQuery).

那么,是否可以在Bower中仅安装Bootstrap的样式(最好是在Sass中)？或者我只需要手动下载并包含Bootstrap样式？

我有一个表格,我需要有2个或更多日期字段用于不同的事情.我尝试了Angular UI Bootstrap,当我在表单中只有一个日期字段时,它工作正常.但是,如果我有多个日期字段,它就会停止工作,我不知道更简单的方法让它工作.

这是我的HTML示例:

 <label>First Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>      

 <label>Second Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" name="dtSecond" ng-model="formData.dtSecond" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>     

我的JS是:

myApp.controller('DatePickrCntrl', function ($scope) {

      $scope.today = function() {
        $scope.formData.dt = new Date();
      };
      $scope.today();

      $scope.showWeeks = true;
      $scope.toggleWeeks = function () {
        $scope.showWeeks = ! …

我有一个带注册表格的模态.相同的表单应显示在目标网页的底部而不是模式中.

目前我的处理注册模式的控制器$modalInstance作为其参数之一$scope等.如果我添加ng-controller="SignUpCtrl"到着陆页中的元素,它不起作用,因为控制器不是通过$modal.open方法创建的,所以Angular抱怨Unknown provider: $modalInstanceProvider <- $modalInstance.

我有一个注册用户的服务(authService.signUp(data).then/catch...)但是控制器本身做了一些 - 处理输入,发出事件(例如翻译错误消息),设置cookie等.

在不重复几乎整个控制器代码的情况下处理此类案例的最佳方法是什么？我应该将代码从控制器移动到另一个更高级别的服务吗？

我正在使用AngularUI在我的Angular 1.4应用程序中集成Bootstrap组件,例如Modals.

我在我的控制器中调用一个模态,如下所示:

var modalInstance = $modal.open({
  animation: true,
  templateUrl: '/static/templates/support-report-modal.html',
  controller: 'ModalInstanceCtrl'
});

不幸的是,当我想通过使用以下方式关闭Modal时:

modalInstance.close();

模态本身消失了,背景也逐渐消失,但它没有从DOM中删除,因此它覆盖了整个页面,使页面无响应.

当我检查时,我看到了这个:

在https://angular-ui.github.io/bootstrap/#/modal上的文档中的示例中,modal-open将从正文中删除该类,并modal-backdrop在关闭时从DOM中删除整个类.为什么模态逐渐消失,但在我的示例中没有从DOM中删除背景？

我已经检查了许多关于bootstrap Modals背景的其他问题,但我似乎无法弄清楚出了什么问题.

我正在使用angular bootstrap typeahead.我想添加一个功能infinite scroll,因为我已经添加了一个滚动功能的小指令和typeahead模板中的一些更改,滚动指令按预期工作,但是在结果更新后预先不更新视图.

我的意见如下:

<input type="text" ng-model="variable" placeholder="Search..." typeahead="obj as obj.text for obj in getObject($viewValue)" typeahead-wait-ms="500" />

预先模板:

<ul class="dropdown-menu typeahead-custom" ng-scroll="getObject('{{query}}')" ng-scroll-direction="down" ng-show="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{match.id}}" should-focus="isActive($index)">
        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
</ul>

和getObject函数:

$rootScope.lastResult = [];
$rootScope.getObject = function(str) {
    return  $http({
        url: "someUrl",
        method: "post",
        headers: …

我正在使用angular-ui typeahead.如何在焦点输入框时触发弹出项目,而不是在键入后触发弹出项目.

我正在使用angular-ui-bootstrap-bower#0.7.0 with angular#1.2.10,当打开一个模式,控制器是一个"老式"控制器时,一切正常.

但是,当我有一个控制器意味着使用新的"控制器作为语法"时,它不起作用.angular-ui-bootstrap模式是否与控制器一起作为语法？0.7版是否支持它？怎么做？

我的角度应用程序工作得很好,我的测试也是如此,使用了业力和茉莉,直到我添加了一个依赖ui.bootstrap.现在应用程序仍然按预期工作,但我无法运行我的测试.这就是我所拥有的:

app.js - 在ui.bootstrap中添加了依赖项

angular.module('myApp', ['ngResource', 'ngRoute', 'ui.bootstrap']).config(function(...) {...});

service.js

angular.module('myApp').service('myService', function () {})

controller.js

angular.module('myApp').controller('MyController', function ($scope, $http, myService) {})

测试/ main.js

describe('Controller: MyController', function () {
    var MyController, scope;
    // load the controller's module
    beforeEach(function(){
        module('myApp');
        inject(function ($controller, $rootScope) {
            scope = $rootScope.$new();
            MyController = $controller('MyController', {
                $scope:scope
            });
        });
    });
    it('should do something', function () {
        expect(scope.myOptions.length).toBe(5);
    });
}); 

我使用grunt和krama运行的测试因以下原因而失败:

Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed …

我在我的项目中使用Angular-ui/bootstrap模式.

这是我的模态:

$scope.toggleModal = function () {
    $scope.theModal = $modal.open({
        animation: true,
        templateUrl: 'pages/templates/modal.html',
        size: "sm",
        scope: $scope
    });
}

可以通过单击ESC按钮或单击模态区域外部来关闭模态.有没有办法在发生这种情况时运行一个函数？我不太清楚如何抓住那种结束.

我知道我可以通过这样的方式手动解除模态ng-click="closeModal()":

$scope.closeModal = function () {
    $scope.theModal.dismiss('cancel');
};

如果有人可以提供帮助,我们将不胜感激.