标签: angular-ui

我必须添加以下代码:

<style type="text/css">a {cursor:pointer;}</style>

在angular-ui-bootstrap中将光标更改为指针/手指在Tabs,Pagination,Dropdown Toggle等链接上.

为什么默认情况下它不会改变为指针？这是故意这样做的吗？这不是纯bootstrap中的正常情况.

非常感谢.

我有以下设置:

   var admin = {
        name: 'admin',
        url: '/admin',
        views: {
            'menu': {
                templateUrl: '/Content/app/admin/partials/menu.html',
            },
            'content': {
                templateUrl: function (stateParams) {
                    var content = localStorage.getItem('ls.adminPage');
                    if (content != null && content != "") {
                        return '/Content/app/admin/partials/' + content + '.html';
                    }  else {
                        return '/Content/app/common/partials/empty.html';
                    }
                }
            }
        }
    };

    var adminContent = {
        name: 'admin.content',
        parent: 'admin',
        url: '/:content',
        views: {
            'content@': {
                templateUrl: function (stateParams) {
                    localStorage.setItem('ls.adminPage', stateParams.content);
                    return '/Content/app/admin/partials/' + stateParams.content + '.html';
                },
            }
        } …

我正在使用Angular UI来呈现手风琴中的小数据库条目.在第一次试验中,我使用了bootstrap,但是当我整合AngularJS视图时,手风琴不再完全正常工作(空的href ......).然后我用角度UI bootstrap one和默认模板替换了我的bootstrap手风琴.

我的问题是,在bootstrap版本中,我设法根据手风琴标题(我使用ng-repeat指令和标题内的ng-style)对标题进行了风格化.我尝试使用Angular UI做同样的事情,但即使我的自定义类也没有渲染.

这个示例代码在bootstrap上运行得很好,但ui.boostrap手风琴不再适用:

accordion-group.accordion-groupLog(ng-repeat="item in data.entries | filter:search") 
   accordion-heading.accordion-headingLog(ng-style="{backgroundColor: styles[item.importance-1].bkcolor, color: styles[item.importance-1].color}")
         {{item.title}}   ({{item.importance}})

这里的目标是基于项目字段应用不同的样式(背景颜色和文本颜色).此外,手风琴 - headingLog类是为了调整手风琴的默认大小.

这是渲染的代码:

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search">
   <div class="accordion-heading">
      <a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
......

我期待的是:

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search">
   <div ng-style="{backgroundColor: styles[item.importance-1].bkcolor}" class="accordion-heading accordion-headingLog" style="background-color: rgb(214, 24, 40);">

[编辑]我试图将accordion-headingLog类放入ng-class属性,但它也不起作用.为了测试,我尝试将类和风格应用于手风琴的主体内部,并且效果很好.我认为accordionHeading指令不接受任何类或属性？如何在标题上动态应用样式然后???

[编辑]另一个试验是建立我自己的模板.我能够将accordion-headingLog类应用于标题,但是如何设置可自定义的样式？我尝试使用ng-style并应用固定样式,但它不起作用.

script(type="text/ng-template", id="template/accordion/accordion-group.html").
    div.accordion-group
    div.accordion-heading.accordion-headingLog(ng-style="{background-color: #123456")
       a.accordion-toggle(ng-click="isOpen = !isOpen", accordion-transclude="heading") {{heading}}
    div.accordion-body(collapse="!isOpen")
       div.accordion-inner(ng-transclude)

我的Angular应用程序有许多模态,我有AngularUI来提供模态指令.

http://angular-ui.github.io/bootstrap/

到目前为止,我有几个主控制器,这些都在app.js文件中作为路由.

$routeProvider.when '/dashboard',         templateUrl: '/templates/dashboard/dashboard.html', controller: 'DashboardController'
$routeProvider.when '/dataset/:panel_id', templateUrl: '/templates/dataset/dataset.html',   controller: 'DatasetController'
$routeProvider.when '/batches/:panel_id', templateUrl: '/templates/design/design.html',     controller: 'PanelController'  

这很好用.

然后我创建了一个调用模态的函数,而modal有一个ConfigureModalCtrl的实例控制器.我最初在调用控制器文件的底部有这个,它工作正常.

$scope.invokeConfigureModal = (assay_id) ->
   $scope.assay_id = assay_id
   $scope.primer3 = $scope.getPrimer(assay_id)
   modalInstance = $modal.open(
     templateUrl: '/templates/configure_modal/configure_modal.html'
     controller: ConfigureModalCtrl
     windowClass: 'configure-dialog'
     resolve:
           primer3: ->
             $scope.primer3
   )
   modalInstance.result.then ((primer3) ->
      $scope.primer3 = primer3
      return
     ), ->
      return   

现在我已将模态实例控制器移动到它自己的文件中,但调用函数找不到它.

angular.module('assaypipelineApp').controller "ConfigureModalCtrl", ($scope,  $modalInstance, primer3) ->
  $scope.primer3 = primer3['data']
  $scope.ok = ->  
    $modalInstance.close $scope.primer3
    return
  $scope.cancel = ->
    $modalInstance.dismiss "cancel" …

在我的模态模板中,我试图用ng-model一个值来分配我的控制器($scope.name)的范围,但它不起作用.它给了我undefined.我究竟做错了什么？这里的人物

我希望模态创建自己的范围,并name因为我使用而放入该范围ng-model.它似乎在模态控制器内是活跃的,因为我可以使用它输出它{{name}}

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-body">
            Name: <input type="text" ng-model="name">
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
        </div>
    </script>
    <button class="btn" ng-click="open()">Open me!</button>
</div>

使用Javascript:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {    
  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl
    });
  };      
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {    
  $scope.ok = function () {
    $modalInstance.close($scope.name);
    alert('name …

我想使用ng-pattern来使用Angular UI datepicker在输入字段上进一步强制执行日期格式.问题是,当我这样做时,它总是显示无效.

<p class="input-group">
    <input type="text" datepicker-popup="MM/dd/yyyy" is-open="opened" close-text="Close"
        ng-model="someDate" class="form-control" placeholder="mm/dd/yyyy"
        ng-pattern="/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/" required />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</p>

如果我将相同的ng-pattern应用于普通输入字段(无日期选择器),它将按预期工作.

似乎存在冲突,但我不确定它是什么.有任何想法吗？

更新:

这是一个简单的plunker来说明所要求的问题.经过一些进一步的挖掘后,似乎确实在对底层Date对象运行模式.但是,当我使用格式化日期的自定义指令时,它会根据实际输入运行它.

我看到NG模式的唯一文档是一个简单提一下这里下输入.还有什么我可能不知道的吗？

我想在调用子状态时访问抽象状态中的url参数($ stateParam).我很想知道如何做到这一点.plunker中的代码也是

$stateProvider
    .state('contacts', {
        abstract: true,

        //my whole point is to get the id=1 here :(

        url: '/contacts/:id',
        templateUrl: function($stateParams){
            console.log("Did i get the child's parameter here? " + $stateParams.id)
            return 'contacts' + $stateParams.id + '.html'; //this will have a ui-view in it which will render its detail.
        }
    })

    .state('contacts.detail', {
        url: '/:id',
        // loaded into ui-view of parent's template
        templateUrl: 'contacts.detail.html',
        controller: function($scope, $stateParams){
          $scope.person = $scope.contacts[$stateParams.id];
        },
        onEnter: function(){
          console.log("enter contacts.detail");
        }
    }) …

无论如何使用Angular UI路由器为每个路由指定默认参数？

通过选择用户然后导航到我的应用程序,我的应用程序通过另一个应用程序的上下文输入.我的应用程序中的URL将始终在URL中具有用户ID,以便人们可以为URL添加书签,通过电子邮件发送等等.因此,当您浏览时,URL始终遵循以下方案:

#/{userId}/view/...
#/{userId}/edit/...

等等

对于他们前往的任何路线,此appId对于应用内部的用户始终是相同的.如果他们碰巧退出,请返回主应用程序,选择一个新用户并返回我的应用程序,此userId将更改,但每个路径的值将相同.

无论如何从服务/工厂读取这个值,然后将其插入每个路由？

编辑:

我应该提一下,当我导航到一个状态时,我想避免在每个路由上显式设置此参数.例如,我不希望ui-sref="new-state({userId : blah})"每次导航到新状态时都要这样做.userId永远不会在我的应用程序的上下文中更改.

再次编辑:

我实际上是以不同的方式讨论了不必手动向每条路线发送'userId'的要求.我使用$ provide.decorator将此功能添加到'go'方法,而不是使用指令.我在下面添加了一个答案.

我在我的一些页面上使用了ng-include,但是我不得不停止使用ng-include,因为它打破了angular-ui datepicker.我打开了这个Github错误.

我想知道是否有其他人在使用作为ng-include的一部分时,指令不能以相同的方式运行.

是否有办法使日期选择器作为ng-include的一部分按预期工作？

这是一个展示它是如何破碎的掠夺者.http://plnkr.co/edit/AboEJGxAK3Uz76CfpaZ0?p=preview

这是在视图上工作的html,但在部分ng包含时不起作用.

<div class="row">
  <div class="col-md-2">
    <p class="input-group">
      <input type="text" class="form-control" datepicker-popup="yyyy/MM/dd" ng-model="something.dt2" is-open="secondCal"
         min-date="minDate" name="secondCal" max-date="'2015-06-22'" datepicker-options="dateOptions"
         date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" style="line-height: 1.2em" ng-click="open($event, 'secondCal')">
            <i class="ss-icon ss-calendar"></i>
          </button>
        </span>
    </p>
  </div>
</div>

这是来自控制器的JS.

$scope.open = function ($event, elementOpened) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope[elementOpened] = !$scope[elementOpened];
  };

我正在做两种方式 - 包括

<div ng-include src="'dist/partials/myPartial.html'"></div>
<div ng-include="'dist/partials/myPartial.html'"></div>

更新 我发现这是因为ng-include指令为每个include创建了一个新的作用域. 这个SO帖子创建了一个新的指令,它可以在不创建新范围的情况下完成包含.然而,似乎"应该"是一种方法来修复它而不使用不同的包含.

我想了解这个JSON编辑器的代码并进行修改.

在directives.js中,有一段代码试图构建模板:

var switchTemplate = 
    '<span ng-switch on="getType(val)" >'
        ... ...
        + '<span ng-switch-when="Boolean" type="boolean">'
            + '<input type="checkbox" ng-model="val" ng-model-onblur ng-change="child[key] = val">'
        + '</span>'
        ... ...
    + '</span>';

// display either "plus button" or "key-value inputs"
var addItemTemplate = 
'<div ng-switch on="showAddKey" class="block" >'
    + '<span ng-switch-when="true">';
        if (scope.type == "object"){
           // input key
            addItemTemplate += '<input placeholder="Name" type="text" ui-keyup="{\'enter\':\'addItem(child)\'}" '
                + 'class="form-control input-sm addItemKeyInput" ng-model="$parent.keyName" /> ';
        }
        addItemTemplate += 
        // value type dropdown …