我们可以在html5中的同一页面上使用多个标签吗？

我在Zeldman.com上看过这篇文章,但对我来说并不完全清楚

即

<header><nav>links here</nav></header>

<footer><nav>links here</nav></footer>

出于某种原因,我在es6课程中为"this"获得了奇怪的价值......

'use strict';
class Clicker {
  constructor(element) {
    this.count = 0;
    this.elem = element;
    this.elem.addEventListener('click', this.click);
    
    // logs Clicker { count:0, elem: button#thing} as expected
    console.log(this);
  }

  click() {
    // logs <button id="thing">...</button> as unexpected...
    console.log(this);
    this.count++;
  }
}


var thing = document.getElementById('thing');
var instance = new Clicker(thing);

<button id="thing">Click me</button>

题:

为什么Clickers的click方法中的"this"指的是dom节点而不是......本身？

更重要的是,如果我不能使用"this"来执行此操作,如何从其"点击方法"中引用Clickers的count属性？

我在使用下划线去抖的服务中有一个方法.

在该方法内部是对不同服务的方法的调用.我正在尝试测试调用不同的服务.

在我尝试测试debounced方法时,从不调用不同服务的方法,并且jasmine失败:

"期待的间谍aMethod被称为."

我知道它被调用(它以chrome格式登录到控制台),它只是在预期已经失败后被调用.

因此...(最好)不添加Sinon或其他依赖项并且
给予解决方案的奖励积分*不必将_.debounce转换为$ timeout ...

怎么办？

angular.module('derp', [])
.service('herp', function(){ 
   return {
     aMethod: function(){ 
       console.log('called!'); 
       return 'blown'; 
     }
   }; 
 })
 .service('Whoa', ['herp', function(herp){
   function Whoa(){
     var that = this;
     this.mindStatus = 'meh';
     this.getMind = _.debounce(function(){
       that.mindStatus = herp.aMethod();
     }, 300);
   }
   return Whoa;
 }]);

测试:

describe('Whoa', function(){
  var $injector, whoa, herp;

  beforeEach(function(){
    module('derp');
    inject(function(_$injector_){
      var Whoa;
      $injector = _$injector_;
      Whoa = $injector.get('Whoa');
      herp = $injector.get('herp');
      whoa = new Whoa();
    });
  });

  beforeEach(function(){
    spyOn(herp, 'aMethod').andCallThrough();
  });

  it('has …

在angular docs的指令部分

它们大致提供了如何制作拖动物的示例.

我的问题是你如何测试他们的例子/实施:

  var startX = 0, startY = 0;
  scope.x = 0;
  scope.y = 0;
  element.css({
    top: scope.y, 
    left: scope.x
  });

  element.on('mousedown', function(event) {
    // Prevent default dragging of selected content
    event.preventDefault();
    startX = event.pageX - scope.x;
    startY = event.pageY - scope.y;
    $document.on('mousemove', mousemove);
    $document.on('mouseup', mouseup);
  });

  function mousemove(event) {
    scope.y = event.pageY - startY;
    scope.x = event.pageX - startX;
    element.css({
      top: scope.y + 'px',
      left: scope.x + 'px'
    });
  }

  function mouseup() {
    $document.off('mousemove', mousemove); …

我一直试图将业力设置为与Require.js一起使用几天(然后使用带角度的需求)并且令人惊讶地令人沮丧.这是我的文件树在这个例子中的样子:

$ tree
.
|-- public
|   |-- index.html
|   |-- src
|       |-- app.js
|       `-- main.js
|-- config
|   |-- karma.conf.js  
|-- lib
|   |-- jquery.js
|   |-- require.js
|   `-- underscore.js
|-- src
|   |-- app.js
|   `-- main.js
`-- test
    |-- appSpec.js
    `-- test-main.js

注意:

我正在处理的这个存储库是karma requirejs示例中使用的存储库的克隆.karma示例githubs代码与我的代码之间的唯一区别是对文件目录结构的3个更改:

1. /karma.conf.js

       ==> /config/karma.conf.js
   

   Run Code Online (Sandbox Code Playgroud)

2. / src目录/

       ==> /public/src/
   

   Run Code Online (Sandbox Code Playgroud)

3. /index.html

       ==> /public/index.html
   

   Run Code Online (Sandbox Code Playgroud)

所以.现在为了让一切正常,你必须:

1. 从conf目录中运行karma,

2. 在karma.conf.js文件中更改:

   basePath: '',
   

   Run Code Online (Sandbox Code Playgroud)

   至

   basePath: '../',
   

   Run Code Online (Sandbox Code Playgroud)

3. 并在test/test-main.js(这是requirejs.config文件)中更改:

requirejs.config({

// Karma serves files from …

我在这里看到了很多类似的问题,但还没有找到一个有效的解决方案.我认为正在发生的是,因为我们的Ng2App首先被引导,它还没有引用$ injector,所以当我尝试在我的提供者声明(deps:['$ injector'])中使用它时,它没有'存在.

什么是INSANELY奇怪的是我可以在Angular COMPONENT中使用此服务但由于某种原因无法在Angular SERVICE中使用它.

app.js

import UserService from './user.service';
angular.module('app', [])
  .service('UserService', UserService)
  .config(/* config */)
  .run(/* run */);

 import './ng2app.module';

ng2app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ], 
  declarations: [],
  entryComponents: [],
  providers: [
    // angularJS service:
    { 
     provide: 'UserService',
     useFactory: (i: any) => i.get('UserService'), // <---- this is the line all the errors point to.
     deps: ['$injector']
    },
  ] …