小编kon*_*vid的帖子

角度和去抖动

在AngularJS中,我可以使用ng-model选项去抖模型.

ng-model-options="{ debounce: 1000 }"
Run Code Online (Sandbox Code Playgroud)

如何在Angular中去抖模型?我试图在文档中搜索debounce,但我找不到任何东西.

https://angular.io/search/#stq=debounce&stp=1

一个解决方案是编写我自己的去抖函数,例如:

import {Component, Template, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app'
})
@Template({
  url: 'app.html'
})
// Component controller
class MyAppComponent {
  constructor() {
    this.firstName = 'Name';
  }

  changed($event, el){
    console.log("changes", this.name, el.value);
    this.name = el.value;
  }

  firstNameChanged($event, first){
    if (this.timeoutId) window.clearTimeout(this.timeoutID);
    this.timeoutID = window.setTimeout(() => {
        this.firstName = first.value;
    }, 250)
  }

}
bootstrap(MyAppComponent);
Run Code Online (Sandbox Code Playgroud)

而我的HTML

<input type=text [value]="firstName" #first (keyup)="firstNameChanged($event, first)">
Run Code Online (Sandbox Code Playgroud)

但是我正在寻找一个内置函数,Angular中有一个吗?

javascript angular

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

基于角度组件的方法并在Router中使用resolve

所以我正在使用基于组件的角度方法,假设我有一个名为的指令 <home></home>;

import template from  './home.html';
import controller from './home.controller.js';

angular.module('myApp')
   .directive('home', homeDirective);

let homeDirective = () => {
    return {
        restrict: 'E',
        template, 
        controller,
        controllerAs: 'vm',
        bindToController: true
    };
};
Run Code Online (Sandbox Code Playgroud)

现在我可以<home></home>在我的路由中使用该组件,如下所示:

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            template: '<home></home>'
        })
    })
Run Code Online (Sandbox Code Playgroud)

我真的很喜欢这种方法,但是使用"旧"方法,我习惯在我的routeconfig中使用"resolve"来仅在解析promise时呈现组件:

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            templateUrl: './home.html',
            controller: './home.controller.js',
            resolve: {
            message: function(messageService){
                return messageService.getMessage();
            }
        })
    })
Run Code Online (Sandbox Code Playgroud)

如何在角度中使用基于组件的方法的解决方案?AAJ

javascript angularjs

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

Angular GET请求错误,但仅限于Safari iOS

我正在建立一个使用wordpress作为后端的网站,并将angularjs作为前端.我正在使用wordpress json API将我的数据传输到前端.

https://wordpress.org/plugins/json-api/

问题

我正在使用angular从wordpres json API获取我的数据.我创建了以下服务:

this.getPage = function ( slug ) {
    return $http.get('wordpress/api/get_page/?slug=' + slug)
}
Run Code Online (Sandbox Code Playgroud)

我在我的控制器中使用此服务来获取当前页面

HTTPService.getPage('home')
    .success(function ( data ) {
        $scope.page = data.page;
        console.log(arguments);
    })
    .error( function () {
        console.log(arguments);
    })
Run Code Online (Sandbox Code Playgroud)

所以这在所有浏览器中都运行良好,除了safari iOS.在Safari iOS上,如果我记录错误参数,我会得到以下响应:

错误回复0?

这是safari调试器,我将我的iphone连接到我的macbook.我得到的错误响应是错误代码0 ..

到目前为止我尝试过的

我在htaccess文件中设置了"Access-Control-Allow-Origin"*",但这似乎不起作用.请求是在相同的域上使用相对URL完成的,所以我甚至不认为这是问题所在.

那么任何人都知道为什么这不适用于safari(仅限iOS)?

提前致谢...

编辑

一些额外的信息要求:

javascript ajax wordpress mobile-safari angularjs

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

检测iOS是否正在使用webapp

我想知道是否可以检测iOS用户是否正在使用webapp,或者只是使用safari浏览器访问正常方式.

我想要实现的原因是,当用户点击链接时,在iOS webapp上,他将被重定向到Safari浏览器.所以我使用以下解决方法让他留在webapp(阻止切换到safari浏览器).

$( document ).on("click",".nav ul li a",
        function( event ){

        // Stop the default behavior of the browser, which
        // is to change the URL of the page.
        event.preventDefault();

        // Manually change the location of the page to stay in
        // "Standalone" mode and change the URL at the same time.
        location.href = $( event.target ).attr( "href" );

        }
    );
Run Code Online (Sandbox Code Playgroud)

但我希望这种解决方法只在用户使用webapp时发生,我希望它对webapp用户有条件.所以不在默认的safari浏览器上.

html javascript jquery ios browser-feature-detection

16
推荐指数
2
解决办法
7864
查看次数

使用chrome中的window.open打开时保存文档

我有一个问题,用javascript打开一个新窗口.我在一个名为"theCode"的var中有HTML代码;

var j = window.open('')
j.document.write(theCode);
j.document.close();
Run Code Online (Sandbox Code Playgroud)

以下代码工作正常,但在chrome中我无法保存新文档或查看源代码(禁用选项).在Firefox中它很好.Chrome中是否有针对此的解决方法?

javascript

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

Intellisense不使用Visual Studio Code中的导入

当使用javascript(es2015)导入时,Intellisense似乎被打破了.

当我在同一个文件中工作时,VSC使用正确的JSDoc信息从对象中自动提取方法.

在此输入图像描述

但是,当在另一个文件中导入Class时,Intellisense似乎完全被破坏了(david.david,wtf?).

在此输入图像描述

我是否需要调整Visual Studio Code中的任何设置才能使其正常工作?我尝试将我的jsconfig文件调整为es2015 import和es6 as,但是没有用.

我的jsconfig.json:

{
    "compilerOptions": {
        "module": "es6"
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript intellisense jsdoc ecmascript-6 visual-studio-code

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

是否可以使用ESDOC记录javascript普通对象?

ESDOC似乎只针对ES6级风格.

有没有办法记录像以下的普通对象:

/**
 * ???
 */
var Foo = {
    /**
     * ???
     */
    info: true
};

export default Foo;
Run Code Online (Sandbox Code Playgroud)

即使使用ES6类样式,如何记录静态属性,如:

class Bar {
}

/**
 * ???
 */
Bar.info = true;

export default Bar;
Run Code Online (Sandbox Code Playgroud)

javascript documentation esdoc

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

Firefox中的CSS3翻转动画bug

我用css3创建了一个翻转动画.在webkit浏览器上,翻盖看起来很好,但在firefox中,翻转动画无法正常工作.您可以看到翻转动画有效,但它看起来非常"怪异"并且不会一直翻转.

我的HTML:

<li class="employee">
   <div class="employee_container">
        <div class="front flip">
            <img src="http://www.piratealumni.com/s/722/images/editor/headshots/AshleyPerson.jpg" alt="">
        </div>
        <div class="back flip">
            <h2>Title</h2>
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
        </div>
    </div>
</li>
Run Code Online (Sandbox Code Playgroud)

我的CSS:

.employee {
    width:33%;
    float:left;
    display:block;
    padding:0.5em;
    height:20em;
}

.employee_container {
    height:100%;
    position:relative;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

.back, .front {
    border: 3px solid #cecece;
    position:absolute;
}

.front img {
    min-height:100%;
    height:auto;
    width:100%;
}

.front {
    overflow:hidden;
    width:100%;
    height:100%;
    z-index:900;
    -webkit-transform: rotateX(0deg) …
Run Code Online (Sandbox Code Playgroud)

html css jquery css3

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

无法在<input>元素上使用的after after元素上设置font-weight

所以,我在输入元素上有一个自定义样式,我想在输入上放置一些文本:after.

我遇到的问题是我似乎无法改变:after元素的字体权重,这个问题只发生在元素input:after元素的组合上.

CSS

input[type="checkbox"] { /* enable styling of the checkbox ! */
    -moz-appearance: none;
    -webkit-appearance: none;
}

input { /* set up some basic styles.... */
    background-color:#ccc;
    width:200px;
    height:200px;
    background-color:grey;
}

input:after { /* and we create the :after element */
    width:100%;
    text-align:center;
    font-weight:100; /* THIS DOESN'T WORK FOR SOME REASON */
    content: "This should be thin"; /* some text */
}
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

http://jsfiddle.net/xQVfL/1/

测试

Chrome for mac(最新)

为什么我不能在:after …

html css css3 pseudo-element css-content

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

如何在ESDOC中记录对象文字

文档没有提到它.

https://esdoc.org/manual/usage/tags.html

任何人都知道如何在ESDoc中记录对象文字,并生成一个报告,用于描述具有所有方法和值的对象.想知道如何记录以下标记.

/**
 * @??
 */
export default {
  /**
   * @??
   */ 
  myProperty: 1,
  /**
   * @??
   */
  myFunction: () => {}
}
Run Code Online (Sandbox Code Playgroud)

javascript esdoc

6
推荐指数
0
解决办法
151
查看次数