标签: angular-ui

我正在尝试使用角度ui路线和角度ui模态制作状态模态.

假设我想填写一个包含4页的注册表单.所有这些页面都是模态的.

我能够在状态变化上打开模态.但之后我想在国家的基础上打开模态的每一页.

    $stateProvider.state('signup', {
  url: '/signup',
  template: '<ui-view />',
  abstract: true
})
.state('signup.modal', {
  url: '',
  resolve: {
    modalInstance: function($modal) {
      return $modal.open({
        template: '<div ui-view="modal"></div>',
        controller: 'signUp',
        windowClass: 'signup-edit-modal',
        backdrop: 'static'
      })
    }
  },
  onEnter: ['modalInstance', '$timeout', '$state',function(modalInstance,$timeout, $state) {
    modalInstance.opened.then(function(status){
      if(status){
        $timeout(function(){
          // changing color of background / backdrop of modal for signup
          angular.element('.reveal-modal-bg').css('backgroundColor','rgba(255, 255, 255, .9)');
        })
      }
    })
    $state.go('signup.welcome')
  }],
  onExit: function(modalInstance) {
    modalInstance.close('dismiss');
    angular.element('.reveal-modal-bg').css('backgroundColor','rgba(0, 0, 0, 0.45)');
  }
})
.state('signup.welcome', {
  url: "/welcome",
    views: …

如果已经打开了一个模式，我的应用程序可以打开一个模式。如果是这种情况，我想关闭该模式并在完成后打开新模式。

打开模态的服务：

app.service('ModalService', function($uibModal) {
this.open = function(size, template, content, backdrop, controller) {
    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: content,
        windowTemplateUrl: template,
        controller: controller,
        backdrop: backdrop,
        size: size,
        resolve: {}
    });
    return modalInstance;
};

然后我打开一个：

var m = ModalService.open('lg', '', 'ng-templates/modal.html', true, 'ModalController');

我可以通过以下方式关闭它：

m.close();

当我打开模式时，我只能在同一个开关/案例中使用 m.close() 。如果我想在代码后面的另一个 if 语句中关闭它，则 m 是未定义的。

反正。我可以检查模式是否打开吗？如果我 console.log(m) 那么就是这样的：

d.$$state.status = 1
d.$$state.value = true

但我无法在应用程序的其他地方访问变量 m，因此我无法检查它。

当我在ng-repeat块中使用angular ui datepicker时,datepicker仅适用于第一个块.对于剩余的重复块,虽然显示了日历,但是不能选择日期.

有人可以告诉我如何让它工作？我试图用$ parent附加模型名称,但这没有帮助.

我有一个产品列表,每个产品都有一个新的发布表单,其中有两个日期字段.我正在使用ng-repeat来显示产品,并且在单击添加版本时,将填充该产品块的发布表单.表格类似于

<form data-ng-submit="addRelease(b)">
<div class="form-field-container">
    <label for="from">From</label>
    <input class="datePicker" data-date-format="yyyy-mm-dd" type="text"
    placeholder="yyyy-mm-dd" data-ng-model="from" id="from" required>
    <br/>
    <label for="to">To</label>
    <input class="datePicker" data-date-format="yyyy-mm-dd" type="text"
    placeholder="yyyy-mm-dd" data-ng-model="to" id="to" required>
    <br/>
    <label for="releaseNo">Release No.</label>
    <input type="text" id="releaseNo" required>
    <input class="btn btn-primary" type="submit" value="Add">
</div>
</form>

它仅适用于列表中第一个的产品.对于其他产品虽然dateui选择器弹出但我们无法选择日期.

我正在使用以下内容在我的数据网格中进行分页:

$location.search('page', page);

其中page是当前页码.

然后我听以下事件:

   $scope.$on('$routeUpdate', function(next, current) {
            $scope.currentPage = $routeParams.page ? Number($routeParams.page) : 1;

            $scope.search();
        });

在更新URL中的currentPage之后,触发对我的作用域上的search()方法的调用.

我如何将其转换为使用ui-router的状态？由于我使用状态管理器而不是路由,因此不再触发$ routeUpdate.

我的路由现在在州提供商中定义如下:

   $stateProvider
        .state('mandats', {
            url: '/domiciliations/mandats',
            templateUrl: 'domiciliations/views/mandats.html',
            controller: 'mandatsCtrl'
        })

我试图在IE8中打开AngularUI网站(http://angular-ui.github.io/).在IE8中未正确呈现UI(在最新版本的chrome/firefox中正常工作).这导致我搜索AngularUI模块的浏览器兼容性.小组讨论指出,AngularUI-bootstrap模块不支持IE8(https://groups.google.com/forum/#!topic/angular-ui/8L0739rxdes)但是可以找到下面列出的其他模块的信息.UI-Utils UI模块NG-Grid UI-Router所以问题是,这些模块是否与ie8兼容.如果是,是否有希望在未来继续提供支持.

我试图用嵌套导航将我的大脑包裹在Angular UI路由器周围.

我的应用有多个页面.我已经设置了StateProvider,并且页面之间的基本路由工作正常.但是,我现在正尝试在其中一个页面中实现选项卡式视图.我无法让它发挥作用.

这里可以看到一个基本的例子:http: //codepen.io/anon/pen/eBLfD

具体来说:1)第一个选项卡的内容不会被加载; 2)当我将abstract设置为false时,保存选项卡的页面会被加载.

我已经尝试将abstract设置为false,然后页面加载,但第一个选项卡的内容不会被加载.我在抨击这个 - 我错过了什么？

我使用AngularJS和ui-router,这是我当前的app.js配置.

'use strict';

angular.module('nodeserverApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router'
])
.config(function ($routeProvider, $locationProvider, $httpProvider , $stateProvider , $urlRouterProvider) {

$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'partials/user/main',
        controller: 'MainCtrl'
    })
    .state('dashboard', {
        url: '/user/dashboard',
        templateUrl: 'partials/user/dashboard/main',
        controller: 'UserDashboardDashboardCtrl',
        authenticate: true
    })
    .state('dashboard.welcome', {
        url: '/welcome',
        parent: 'dashboard',
        templateUrl: 'partials/user/dashboard/welcome'
    })
    .state('dashboard.account', {
        url: '/account',
        templateUrl: 'partials/user/dashboard/account',
        controller: 'UserDashboardAccountCtrl'
    })
    .state('dashboard.address', {
        url: '/address',
        templateUrl: 'partials/user/dashboard/address/index'

    })
    .state('dashboard.address.view', {
        url: '/view',
        templateUrl: 'partials/user/dashboard/address/view',
        controller: 'UserDashboardAddressViewCtrl'

    })
    .state('dashboard.address.new', {
        url: '/new', …

试图在angular-ui模式中加载一个简单的谷歌地图.但是没有运气.数据得到了很好的传递,但没有任何方面的地图...请帮忙.

$modalInstance.opened.then(function() {

var mapOptions = {
  center: new google.maps.LatLng(34.834442, -82.3686479),
  zoom: 8
};

  new google.maps.Map(document.getElementById("eventMap"), mapOptions);
});

在模态html里面:

<div class="row clearfix">
  <div class="col-md-5" id="eventMap" style="display: block; height: 150px;"></div>
</div>

我在常规页面HTML中试过这个并且工作得很好......

我错过了什么？先感谢您!

我正在使用Angular UI来使我的菜单可以排序,有时候代码可以工作,有时候它会像重新安排项目那样重复条目或填充空白菜单.

以下是完整的代码 -

<!doctype html>
<html lang="en" ng-app="myapp">
<head>
    <title>Angular Sortable Demo</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
    <script>
        var myapp = angular.module('myapp', ['ui']);

        myapp.controller('controller', function ($scope) {
            $scope.list = ["one", "two", "three", "four", "five", "six"];
        });

        //angular.bootstrap(document, ['myapp']);   
    </script>
</head>
<body>
<div ng:controller="controller">
    <ul ui:sortable ng:model="list">
        <li ng:repeat="item in list" class="item">{{item}}</li>
    </ul>
    <hr />
    <div ng:repeat="item in list">{{item}}</div>
</div>
</body>
</html>
<style>
    .item, .placeholder {
    padding: 2px;
    width: 50px;
    height: 20px;
    border: 1px solid #333;
    background: …

AngularJS状态机扩展ui-router声明一个指令,该指令将带有属性的路由转换ui-sref为href路径并使用请求的变量填充它.有没有办法从范围访问相同的路由解析器？

更新

我正在寻找一个希望内置但未记录的解析器(或获得相同结果的方法),它提供了命名参数的路径.本着命名路线的精神:

<a ui-sref="management.person({personId: 1})" />

哪条路线匹配

$stateProvider.state('management', {
  url: '/absolute/part'
});

$stateProvider.state('management.person', {
  url: '/relative/part/:personId'
});

和输出#/absolute/part/relative/part/1- 如果我切换到使用!片段,所有的URL都会被转换.指令本身已经这样做了,但它的参数不能动态构造.