带有引导模式的 Angularjs答案

【问题标题】：Angularjs with bootstrap Modal带有引导模式的 Angularjs
【发布时间】：2015-05-31 14:35:38
【问题描述】：

我正在使用带有引导程序的普通 angularjs。我正在尝试创建用户登录后登陆的页面。

所以作为默认路由"/"用户登陆到landing.html

landing.html 包含

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#/landing">Home</a></li>
  <li role="presentation"><a href="#/tags">Tags</a></li>
  <li role="presentation"><a href="#/help">Help</a></li>
</ul>

我的问题是我有带有 Homes 标签和帮助的导航。单击选定的按钮背景应更改。目前它唯一的形式是 Home (#/landing)。我也有使用 ng-swipe 的问题

任何帮助将不胜感激。

控制器

app.controller('indexCtrl', function($scope,$http,$rootScope){

     $('#myModal').modal({
      backdrop: 'static',
      keyboard: false
    });

     $(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

});

【问题讨论】：

你看过Angular directives for Bootstrap吗？
你看过angular-ui angular-ui.github.io/bootstrap
问题是这个应用程序已经写好了。我必须把它写成 POC。
并且无法添加或更改任何 css js 文件。
jQuery 功能不会触发角度摘要循环，因此您的更改可能不会因此而反映。尝试使用延迟为 0 的 $timeout 或 $scope.$apply()

标签： javascript angularjs html twitter-bootstrap angular-ui-router

【解决方案1】：

我的解决方案是

<ul class="nav nav-tabs ">
  <li role="presentation" ng-class="{ active: makeActive('/')}"><a href="#/">Home</a></li>
  <li role="presentation" ng-class="{ active: makeActive('/maps')}"><a href="#/maps">Maps</a></li>
  <li role="presentation" ng-class="{ active: makeActive('/help')}"><a href="#/help">Help</a></li>
</ul>

在控制器中

  $scope.makeActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };

这似乎可行，但我怎样才能向它添加滑动手势。

【讨论】：