小编Mic*_*ick的帖子

AngularJS:成功验证后移动到下一个表单输入元素

我已经编写了一个自定义指令来验证我的表单字段.当满足某些条件时(即它是脏的和有效的),我想将焦点自动设置为下一个输入元素.这是我的用户的要求,这样他们就可以最有效地浏览表单.

简化的指令如下所示:

directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel', '^ngController'],
        link: function(scope, element, attrs, ctrls) {
           var model=ctrls[0], form=ctrls[1];

           scope.next = function(){
                return model.$valid
            }

            scope.$watch(scope.next, function(newValue, oldValue){
                if (newValue && model.$dirty){
                    ???
                }
            })
Run Code Online (Sandbox Code Playgroud)

现在我的问题是:我如何识别 - 下一个输入元素(下一个兄弟)或可能通过tabindex - 并在不使用Jquery的情况下关注它?

对我来说,目前尚不清楚如何在没有Jquery的情况下从可用的"scope"或"element"属性获取下一个输入元素; 而JQlite没有"焦点"方法.基本上,我需要一个有效的替代品??? 在我的代码中.

任何帮助都非常感谢.谢谢Juergen

forms validation angularjs

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

即使使用ChangeDetectionStrategy.OnPush,也会调用Angular ngDoCheck()

假设我有一个像这样的组件结构:

AppComponent
    HeaderComponent
    ContentComponent
        TodosComponent
            TodoComponent
Run Code Online (Sandbox Code Playgroud)

如果我设置HeaderComponent的changeDetectionChangeDetectionStrategy.OnPush和改变TodoComponent,仍然HeaderComponent的东西ngDoCheck(),ngAfterViewChecked()ngAfterContentChecked()被触发.

我错过了什么?无论如何都会触发ngDoCheck吗?如果是,如何确定ChangeDetection是否检查了组件?

angular2-changedetection angular

4
推荐指数
1
解决办法
4012
查看次数

协议方法的不同返回类型

我想有一个定义一些方法和属性的协议.但是,属性类型和方法返回类型可能在符合所述协议的不同类之间有所不同.例如:A.getContent()可能返回type的值String,但B.getContent()可能返回type的值Int.在下面的示例中,我使用了该类型Any.这在Swift中是可能的还是这是一种完全错误的方法?也许用泛型?

protocol Content {
    func getContent() -> any
}

class A: Content {
    func getContent() -> String {
        return "Im a String"
    }
}

class B: Content {
    func getContent() -> Int {
        return 1234
    }
}
Run Code Online (Sandbox Code Playgroud)

swift

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

Angular 2将一个字符串(css-class)添加到父Component

如何将字符串(css-class)添加到父组件?不同的页面应该能够向容器元素添加一个类.

app.component.ts:

@Component({
  selector: 'app-root',
  template: `
        <div class="container {{ ADD HERE }}">
             <router-outlet></router-outlet>
        </div>
  `
})
export class AppComponent {
  title = 'app works!';
}
Run Code Online (Sandbox Code Playgroud)

page1.component.ts:

@Component({
  template: `
      <p>I'm page 1!</p>
  `
})
export class Page1Component {
      containerClasses = "page-1";
}
Run Code Online (Sandbox Code Playgroud)

angular2-directives angular

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

没有动画/平滑滚动的角度滚动位置恢复?

使用scrollPositionRestoration: 'enabled'forRouterModule确实是一个不错的功能,但如何禁用滚动动画/平滑滚动以便它捕捉到该位置?

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
    }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
Run Code Online (Sandbox Code Playgroud)

背景:平滑滚动感觉不像浏览“正常”网站,因为通常如果来回导航,就不会平滑滚动。

angular

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

带有display none的CSS动画关键帧可以淡入,但不会淡出

我有一个在开始时没有显示的元素.当我向它添加一个类时,我想让它淡入,使用CSS.

我发现这个教程使用了很好用于淡入淡出的关键帧.但是如果我想以同样的方式淡出,那么元素会立即被隐藏而没有动画.

基本上它看起来像这样:

.box {
  display: none;
  opacity: 0;
  animation: FadeOut 1s ease-in-out;

  &.active {
    display: block;
    opacity: 1;
    animation: FadeIn 1s ease-in-out;
  }
}
Run Code Online (Sandbox Code Playgroud)

这是一个"工作"的例子:http: //codepen.io/MickL/pen/NAopXN

css css3 css-animations

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