标签: angular-ui

我无法找到一种合理的方法来解决这个相当微不足道的问题.

我希望访客在访问网站索引时看到启动页面,并且登录用户查看他们的个人资料,每个页面都有自己的模板和控制器.理想情况下,一个url会有两种状态,不知怎的,我可以根据loggin状态自动更改活动状态.这两个视图都有自己的嵌套视图,因此无法使用ng-include(我假设).

我对angular和ui路由器都很陌生,并认为我可能会忽略这个问题的简单解决方案.

可以用命名视图和ng-show完成吗？

假设我收到一个包含15个以上对象的对象文字,我需要在一个漂亮的布局中显示它们(并非所有的连续),控制何时应该断行/页面应该结束的最有效的方法是什么？

现在我在表行上使用ng-repeat,结果是一个带有一列的长薄表.

编辑以澄清.可以在对象/更多参数中包含对象.这是我的对象:

$scope.zones = [
        {"name": "Zone 1",
         "activity": "1"},
        {"name": "Zone 2",
         "activity": "1"},
        {"name": "Zone 3",
         "activity": "0"},
        {"name": "Zone 4",
         "activity": "0"},
        {"name": "Zone 5",
         "activity": "0"},
        {"name": "Zone 6",
         "activity": "0"},
        {"name": "Zone 7",
         "activity": "1"},
        {"name": "Zone 8",
         "activity": "0"},
        {"name": "Zone 9",
         "activity": "0"},
        {"name": "Zone 10",
         "activity": "0"},
        {"name": "Zone 11",
         "activity": "1"},
        {"name": "Zone 12",
         "activity": "1"},
        {"name": "Zone 13",
         "activity": "0"},
        {"name": "Zone 14",
         "activity": "0"},
        {"name": "Zone 15",
         "activity": …

在撰写本文时,Angular UI Bootstrap基于Twitter Bootstrap 2,而最新版本是Bootstrap 3.如果我要在今天的Angular.js中编写应用程序,我应该使用哪种UI框架？Angular UI还是普通的Bootstrap？

有什么利弊？无论是长期还是短期.

Web应用程序的一个关键组件是面包屑/导航.使用Angular UI路由器,将breadcrumb元数据与各个状态放在一起是有意义的,而不是在控制器中.手动为每个需要它的控制器创建面包屑对象是一项直接的任务,但它也是一个非常混乱的任务.

我已经看到了一些使用Angular的自动面包屑的解决方案,但说实话,它们相当原始.某些状态,如对话框或侧面板不应更新面包屑,但使用角度的当前插件,无法表达.

另一个问题是面包屑的标题不是静态的.例如,如果您转到"用户详细信息"页面,则面包屑标题应该是用户的全名,而不是通用的"用户详细信息".

需要解决的最后一个问题是使用父链接的所有正确的状态参数值.例如,如果您正在查看公司的用户详细信息页面,显然您会想知道父状态需要一个:companyId.

是否有角度的插件可以提供这种级别的面包屑支持？如果没有,最好的方法是什么？我不想让我的控制器混乱 - 我会有很多 - 我希望尽可能自动化和无痛.

谢谢!

我在申请表格中使用$ dirty时遇到了一个问题.

问题是,一旦你更改了表单字段,$ dirty的值将被设置为true, 但现在当你撤消更改时,它不会将$ dirty值重置为false.

我们可以手动将$ dirty值重置为false,但之后当您再次更改表单字段值时,$ dirty不会将其值更改为true.根据我的观察,它通过放置ng-dirty类来设置表单中每个字段的$ dirty值.即使您删除该类,它也不会影响$ dirty行为.

// Please find below attached Fiddle for code reference

小提琴.

有没有办法告诉Angular UI中使用Bootstrap选项卡时选择了哪个选项卡？

我尝试观看窗格数组,但切换选项卡时似乎没有更新.选择选项卡时,可以指定回调函数吗？

使用代码示例更新.

代码非常遵循Angular UI引导程序页面中的示例.

标记:

<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

控制器:

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};

我正在使用Bootstrap UI datepicker指令,我正在尝试使用datepicker按钮打开日期选择器弹出窗口,就像在原始示例中一样,但它在模态窗口中不起作用.

见PLUNKER

我究竟做错了什么？

自从我开始研究这个问题已经有好几个小时了,我似乎无法理解解决方案.

我有一个应用程序,可能会导致用户实际输入URL.在这种情况下,不难相信用户可能会输入尾部斜杠.例如,

www.example.com/users/2和www.example.com/edit/company/123

应该像对待一样对待

www.example.com/users/2/和www.example.com/edit/company/123/

这只需要在客户端处理URL路由.我对处理资源/ API调用中的尾部斜杠不感兴趣.我只对处理浏览器中的尾随处理感兴趣.

所以我研究并发现网上的答案不多.他们中的大多数人都把我带到了angular-ui路由器的FAQ部分.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

在这里,他们告诉我们写一条规则,这是我想要做的,但它似乎没有起作用,或者我做错了.

这是我添加代码的plunkr.

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

我已将此添加到我的配置中,其余代码几乎是基本的东西.

$urlRouterProvider.rule(function($injector, $location) {
  //if last charcter is a slash, return the same url without the slash
  if($location.$$url[length-1] === '/') {
    return $location.$$url.substr(0,$location.$$url.length - 2);
  } else {
    //if the last char is not a trailing slash, do nothing
    return $location.$$url;
  }
});

基本上,我想使尾随斜杠可选,即它在地址栏上的存在与否应该对加载的状态没有影响.

我想我错过了什么,但无法弄清楚是什么.
基本上我正试图将一个对象传递给下面的模态,但是我没有得到传递的对象,而是获得null ...所以我认为是范围的问题,但我是Angular中的新手,需要一些帮助.

调节器

app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {

$scope.selected = null;

$scope.open = function (item) {

    $scope.selected = item;

    $log.info('Open' + $scope.selected); // get right passes object

    var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'musicViewModel',
        size: 'lg',
        resolve: {
            items: function () {
                return $scope.selected;
            }
        }
    });
};

$scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
};
});

视图

<div class="row" ng-controller="musicViewModel">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul> …

我在很多方面遇到UI-Router问题.我不明白它是如何与其他框架交互的.

也就是说,我正在尝试实现Bootstrap 3的导航栏折叠模块,如下所示:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name test</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

这是直接来自Bootstrap网站,它在自己的.html页面内工作正常.

问题是当我将其插入UI-Router视图时.折叠动作不再有效 - 我猜是因为"数据目标"功能在某种程度上无法找到目标.

如何在Angular UI中使用Bootstrap 3？Angular UI Bootstrap包没有导航栏模块.

下面的答案是好的.这是一个参考URL Twitter Bootstrap Navbar与AngularJS - 折叠不起作用.