小编Dai*_*imz的帖子

使用带有Bootstrap-ui模式的ui-router

我知道这已被覆盖了很多次,大多数文章都引用了这段代码:AngularJS中带有自定义URL的模态窗口

但我只是不明白.我发现根本不清楚.我也发现这个jsfiddle实际上很棒,非常有帮助,除了这不添加网址并允许我使用后退按钮关闭模态.


编辑:这是我需要帮助的.

那么让我试着解释一下我想要实现的目标.我有一个表单来添加一个新项目,我有一个链接'添加新项目'.我希望当我点击"添加新项目"时,会弹出一个模式,其中包含我创建的"add-item.html"表单.这是一个新状态,因此url更改为/ add-item.我可以填写表格,然后选择保存或关闭.关闭,关闭模态:p(多奇怪).但我也可以点击返回关闭模态并返回上一页(状态). 此时我不需要Close的帮助,因为我仍然在努力实现模态的工作.


这是我的代码:

导航控制器:( 这甚至是放置模态功能的正确位置吗?)

angular.module('cbuiRouterApp')
  .controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
    $scope.menu = [{
      'title': 'Home',
      'link': '/'
    }];

    $scope.open = function(){

        // open modal whithout changing url
        $modal.open({
          templateUrl: 'components/new-item/new-item.html'
        });

        // I need to open popup via $state.go or something like this
        $scope.close = function(result){
          $modal.close(result);
        };
      };

    $scope.isCollapsed = true;
    $scope.isLoggedIn = Auth.isLoggedIn;
    $scope.isAdmin = Auth.isAdmin;
    $scope.getCurrentUser = Auth.getCurrentUser;

    $scope.logout = function() {
      Auth.logout();
      $location.path('/login');
    };

    $scope.isActive = …
Run Code Online (Sandbox Code Playgroud)

angularjs bootstrap-modal angular-ui-router angular-bootstrap

31
推荐指数
2
解决办法
3万
查看次数

是否可以隐藏iOS 7 Safari中的地址栏?

是否可以隐藏iOS 7中的地址栏?

我目前正在使用以下在iOS 6中执行此操作,但我刚刚更新了xCode并在iPhone Sim和iOS 7中测试了Safari没有对此做出响应.

JS:

window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});
Run Code Online (Sandbox Code Playgroud)

javascript iphone safari mobile-safari ios

26
推荐指数
1
解决办法
6万
查看次数

使用Mongoose,Express和AngularJS上传图像

我知道以前已经多次询问过这个问题,而且我已经阅读了几乎所有关于这个主题的内容,即:

/sf/answers/1751570621/

使用Node.js,Express和Mongoose上传图像

这是迄今为止我发现的最好的.我的问题是他们仍然不是很清楚,关于这一点在网上的文档很少,讨论似乎针对的是比我更先进的人.

所以我真的很喜欢它,如果有人可以请告诉我如何使用Mongoose,Express和AngularJS上传图像.我实际上正在使用MEAN fullstack.(这个发生器准确无误 - https://github.com/DaftMonk/generator-angular-fullstack)

AddController:

'use strict';

angular.module('lumicaApp')
  .controller('ProjectAddCtrl', ['$scope', '$location', '$log', 'projectsModel', 'users', 'types', function ($scope, $location, $log, projectsModel, users, types) {
    $scope.dismiss = function () {
      $scope.$dismiss();
    };

        $scope.users = users;
        $scope.types = types;

    $scope.project = {
            name: null,
            type: null,
            images: {
                thumbnail: null // I want to add the uploaded images _id here to reference with mongoose populate.
            },
            users: null
        };

        $scope.save = function () {
            $log.info($scope.project);
            projectsModel.post($scope.project).then(function (project) { …
Run Code Online (Sandbox Code Playgroud)

mongoose mongodb node.js express angularjs

18
推荐指数
1
解决办法
2万
查看次数

如何将LiveReload与AngularJS templateURL一起使用

如何使用LiveReload和Grunt保存时重新加载templateURL?

angular.module('meshApp', [
  'ngSanitize',
  'ngRoute'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });
Run Code Online (Sandbox Code Playgroud)

我有一个jade文件views/main.jade,当我保存处理到.tmp/views/main.html时,目前这个工作,我可以看到模板,但是当我保存LiveReload无法重新加载页面时.

有什么方法可以让它起作用吗?

这里还有一个链接到我的GruntFile,它有助于:http: //jsfiddle.net/daimz/Te5Xc/

javascript node.js angularjs livereload pug

16
推荐指数
1
解决办法
5798
查看次数

如何告诉ui-Bootstrap要分页的内容?

我正在使用ui-Bootstrap,我正在尝试让分页工作,但我似乎错过了一些东西.我已经阅读了文档并查看了一堆掠夺者,试图找出他们如何指定要分页的内容,但我没有运气.

这是我做的http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview

<section class="main" ng-controller="contentCtrl">
  <div ng-repeat="friend in friends">
    {{friend.name}}
  </div>
  <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>

  <p>
    total Items: {{totalItems}}<br />
    Items per page: {{itemsPerPage}}<br />
    Current Page: {{currentPage}}
  </p>
</section>
Run Code Online (Sandbox Code Playgroud)

控制器:

angular.module('plunker', ['ui.bootstrap'])
  .controller('contentCtrl', function ($scope) {

    $scope.friends = [
      {'name':'Jack'},
      {'name':'Tim'},
      {'name':'Stuart'},
      {'name':'Richard'},
      {'name':'Tom'},
      {'name':'Frank'},
      {'name':'Ted'},
      {'name':'Michael'},
      {'name':'Albert'},
      {'name':'Tobby'},
      {'name':'Mick'},
      {'name':'Nicholas'},
      {'name':'Jesse'},
      {'name':'Lex'},
      {'name':'Robbie'},
      {'name':'Jake'},
      {'name':'Levi'},
      {'name':'Edward'},
      {'name':'Neil'},
      {'name':'Hugh'},
      {'name':'Hugo'},
      {'name':'Yanick'},
      {'name':'Matt'},
      {'name':'Andrew'},
      {'name':'Charles'},
      {'name':'Oliver'},
      {'name':'Robin'},
      {'name':'Harry'},
      {'name':'James'},
      {'name':'Kelvin'},
      {'name':'David'},
      {'name':'Paul'}
    ];

    $scope.totalItems = 64;
    $scope.itemsPerPage = …
Run Code Online (Sandbox Code Playgroud)

pagination twitter-bootstrap angularjs angular-ui-bootstrap

14
推荐指数
1
解决办法
3万
查看次数

ng-bootstrap datepicker格式

我正在使用ng-bootstrap datepicker,但是当我保存表单时,日期会被保存为.

date: {
  day: 01,
  month: 12,
  year: 16
}
Run Code Online (Sandbox Code Playgroud)

我希望我能把它当成更像的东西 "2016-11-23T00:39:31.768Z"

这是我的实现:

<div class="input-group">
  <button class="input-group-btn" (click)="d.toggle()" >
    <md-icon svgSrc="assets/images/calendar-plus.svg" style="cursor: pointer;"></md-icon>
  </button>
  <input class="form-control" placeholder="dd-mm-yyyy" name="dp" formControlName="due_date" navigation="arrows" ngbDatepicker #d="ngbDatepicker">
</div>
Run Code Online (Sandbox Code Playgroud)

和form.component:

constructor( private fb: FormBuilder ) {
    this.form = this.fb.group({
      due_date: [''],
    });
  }
Run Code Online (Sandbox Code Playgroud)

datepicker ng-bootstrap angular

13
推荐指数
2
解决办法
2万
查看次数

我怎样才能在AngularJS中听取点击并保持?

我做了一个时间,让你通过点击按钮增加或减少时间.但是,当我点击并按住按钮时,我希望时间的价值会继续攀升.

所以目前如果你看到我的Plunkr每次单击向上按钮时值都会增加,但是我想这样,所以当我按下按钮时,值会增加,1,2,3,4,5,6,7,8直到我释放按钮.

我怎么能做到这样的事情?

javascript angularjs angularjs-directive

12
推荐指数
1
解决办法
2万
查看次数

角度2投掷错误:未激活插座

我已经设置了我的应用程序,以便我有一个Recipe Book列表Recipies,当我点击一个食谱然后它显示Recipe Details在嵌套路线中.然后它还有一个按钮,当点击时加载嵌套路线中的成分Recipes Details.

到目前为止,路由似乎有效,除非我尝试导航到另一个Recipe.如果Ingredients托盘(路线)处于活动状态,则它将更改配方并折叠Ingredients路线,如果我然后尝试导航(不打开配料),我会收到以下错误:

Uncaught (in promise): Error: Outlet is not activated
Error: Outlet is not activated
Run Code Online (Sandbox Code Playgroud)

看起来我路由器需要Ingredients处于活动状态,否则它无法理解嵌套路由.这是我的看法,但不知道如何解决它或当我出错.

单食谱书,page.component.html

<app-tray class="recipe-list">
    <app-recipe-list [recipe]="recipe"></app-recipe-list>
</app-tray>
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)

偏方detail.component.html

<app-tray class="recipe">
    The routing has worked and loaded recipe.
</app-tray>
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)

配料,list.component.html

<app-tray class="ingredients-list">
    Recipe Ingredients have loaded.
</app-tray>
Run Code Online (Sandbox Code Playgroud)

app.routes.ts(更新)

export const routerConfig : Route[] = [
  {
    path: 'recipe-books',
    children: [
      {
        path: ':id', component: …
Run Code Online (Sandbox Code Playgroud)

angular2-router3 angular

11
推荐指数
1
解决办法
1万
查看次数

如何修复'超出最大调用堆栈大小'AngularJS

我正在使用AngularJs和Ui-Router,我正在尝试设置两个不同的主页,一个用于登录的用户,另一个用于非用户.但是我收到以下错误:

RangeError: Maximum call stack size exceeded
Run Code Online (Sandbox Code Playgroud)

我跑了console.trace(),我可以看到有一个问题导致状态无限循环(或类似的东西).BUt我不知道如何解决它.

这是生成错误的代码.

.run(function ($rootScope, $state, $location, Auth) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState) {
      if(fromState.name === "") {
        if (Auth.isLoggedIn()) {
            $state.go('main');
            event.preventDefault();
        } else {
          $state.go('welcome');
          event.preventDefault();
        }
      } else {
         if (toState.authenticate && !Auth.isLoggedIn()) {
             $location.path('/login');
             event.preventDefault();
         }
      }
    });
Run Code Online (Sandbox Code Playgroud)

从我所知道的,它似乎源于 if(fromState.name === "")

javascript angularjs angular-ui-router

9
推荐指数
2
解决办法
3万
查看次数

断点使用波旁网格

我正在尝试使用整洁的波旁威士忌,我已经解决了大部分事情,但是我在创造突破点时遇到了一些障碍.

我更喜欢为手机,平板电脑,桌面和大型桌面制作单独的sass文件,我通常不会使用冒泡来创建我的媒体查询,因为我不喜欢它不仅仅创建一个媒体查询它通过css制作音调文件.但到目前为止,我似乎只能找到关于冒泡方法的文档.

关于如何在整洁中使用断点的文章

这是我做的:

$largedesktop-size:em(1050);

    // Bourbon Neat Breakpoints
    $largedesktop: new-breakpoint(min-width $largedesktop-size 16);


 @include media($largedesktop) { 
    body{
        background:black;
    }
  }
Run Code Online (Sandbox Code Playgroud)

我也试过这个,它确实更新了bg颜色,但没有更新可视网格:

// Media Queries Breakpoints
$tablet-size:em(700);

@include media(min-width $tablet-size 8) {
    body{
        background:orange;
    }
  }
Run Code Online (Sandbox Code Playgroud)

frameworks sass mixins media-queries bourbon

8
推荐指数
2
解决办法
2万
查看次数