小编Mat*_*ood的帖子

我知道这听起来很傻但我正在编写一个让所有设计师创建风格指南的所见即所得编辑器.我已经非常着迷于角度的双向绑定,并且如果有可能在css表和ng-model输入字段之间进行双向绑定,那就很奇怪了.目前,我正在制作一个动态样式指南,允许设计师对页面的主要,次要颜色进行颜色选择.这些颜色将统一改变网站的整个主题,从样式表本身做这件事会很棒.

HTML

<input type="text" ng-model="color.primary" />
<button class="btn primary-color" />

CSS

.primary-color {
  background: {{color.primary}};
}

js $ scope.color {primary:'00f',secondary:'#e58'}

我知道有很多指令喜欢ng-style和ng-class但我担心每个标签都必须是一个指令,因为一切都可以有一个ng-style/ng-class标签.因此,使我的代码不是很干,很难维护.

如果我想要一个动态的CSS风格指南怎么办？我可以将一个表格作为关键值对存储到像firebase一样的服务器,甚至可以实时绑定颜色的变化？我很确定这不可能只使用角度来实现...任何人都有预编译器或黑客的任何想法来完成这个任务,这样它会导致一个干净的风格的家伙吗？

我正在尝试创建一个类似于konami代码的交互"up,up,down,down,a,b,a,b,enter" - >有些事情发生了.

是否可以使用ng-keypress听取箭头按键？它似乎不起作用？

HTML:

input( ng-keypress='changed($event)'  )

JS

$scope.changed = (evt) ->
    console.log(evt)

这不会退出箭头键事件？

我是否必须在窗口上推出自己的听众？如果是这样我怎么能在角度上实现这个目标？

使用Protractor如何设置/添加并行浏览器进行测试.

示例: 不仅测试套件chrome,还包括firefox？还有一种简单的移动测试方法吗？说ios8 safari或移动铬？

题:

如何编写exports.config对象以支持chrome and firefox并行套件测试？

   exports.config = {
      multiCapabilities: [
        {
          'browserName': 'chrome',
          'chromeOptions': {
            args: ['--test-type']
          }
        }
      ]}
    suites: {
        homePageFooter: 'protractor/homePage/footer.spec.js'
      },

目标:

写一个waCarousel指令范围变量的通过测试:self.awesomeThings.期待此测试通过何时self.awsomeThings.length.toBe(3)为真？

题:

我该如何正确编写此测试？而是如何注入指令控制器？

指示:

angular.module('carouselApp')
    .directive('waCarousel', function() {
        return {
            templateUrl: '../../../views/carousel/wa.carousel.html',
            controller: function($scope) {
                var self = this;

                self.awesomeThings = [1, 2, 3];

                return $scope.carousel = self;
            }
        }
    });

单元测试:

describe('waCarousel Unit', function() {
  // am I missing a $controller & namespace variable init?
   var $compile,
      $rootScope;


  // Load the myApp module, which contains the directive
  beforeEach(module('carouselApp'));

  // Store references to $rootScope and $compile and $controller
  // so they are available …

回购协议：https : //github.com/morningharwood/platform/tree/feature/ngrx-firebase

当我尝试订阅我的post ngrx实体功能的selectAll时，收到错误消息：

无法读取未定义地图的属性

我必须逐字阅读教程，这必须是一个简单的错字。

奇怪的是，如果我使用字符串选择器：

 this.selected$ = this.store.select('post');

 this.selected$.subscribe(console.log); // no error here.

我没有错误。

问题：使用ngrx实体时，如何获取selectAll选择器以注销ngrx商店集合中的所有帖子post？

我的 post.reducer.ts

import {
  PostActions,
  PostActionTypes,
} from './post.actions';

import {
  ActionReducerMap,
  createFeatureSelector,
} from '@ngrx/store';
import {
  createEntityAdapter,
  EntityState,
} from '@ngrx/entity';
import { Post } from './post.interfaces';

export const postAdapter = createEntityAdapter<Post>();
export interface PostState extends EntityState<Post> {}

export const postInitialState: PostState = {
  ids: [ '1234' ],
  entities: {
    '1234': {
      id: '1234',
      header: …

https://stackblitz.com/edit/angular-xpamld

问题：有人可以帮助我理解为什么我的原型changeDetection: ChangeDetectionStrategy.OnPush仍然允许我更新内部值name吗？如果这不是ChangeDetectionStrategy.OnPush应该阻止的，它应该做什么？

app.component.ts:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent  {
  public name = 'Angular 5';
  public changeName() {
    this.name = 'Outer';
  }
}

app.component.html：

<hello name="{{ name }}"></hello>
<button (click)="changeName()">Outter Change</button>
<p>{{name}}-- outer</p>
<p>
  Start editing to see some magic happen :)
</p>

你好.component.ts：

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1> <button (click)="changeName()">inner Change</button>`,
  styles: [`h1 { font-family: Lato; }`],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export …

我试图这样做,当你将鼠标悬停在列表项目上时,当前的li弹出,所有其他列表项目淡出或略微模糊.我更喜欢所有的CSS,有人知道如何选择除css中当前选中的所有其他li吗？

更新
我不相信这可能在css中做,因此我试图在jquery中选择它.

用我不工作的jquery脚本继承更新的代码 http://jsfiddle.net/xKEHe/42/

引用通过以下方式隐藏除$(this)之外的所有内容:不在jQuery选择器中

我正在阅读《Rust 编程语言》。文档将 a 定义String为“可增长”：

UTF-8 编码的可增长字符串。

我发现可增长与可变不同，但它们并没有真正解释什么使类型“可增长”。

鉴于这种let mut guess = String::new()，

1. “可生长”是什么意思？
2. 如何mut改变可增长的字符串？
3. 是否存在不可增长的字符串类型？

如何使用 popmotion pure 使最后一个关键帧将我的矩形旋转到 35 度角？

https://codepen.io/matthewharwood/pen/XWmRPaK?editors=1111

HTML：

<div class="flex h-screen w-screen justify-center items-center">
  <div class="portal-b">
    <h1 class="left"></h1>
  </div>
</div>
<button class="trigger fixed z-10 left-0 top-0">
  B replace A
</button>

CSS：

.portal-b {
  background: blue;
  width: 1px;
  height: 100px;
}

JS

const { easing, keyframes, styler } = window.popmotion;
const trigger = document.querySelector('.trigger');
const [_, portalB] = [document.querySelector('.portal-a'), document.querySelector('.portal-b')];
trigger.addEventListener('click', () => {
  const portalS = styler(portalB);
  keyframes({
  values: [
    { translateX: 0, scaleX: 0, rotateZ: 0, transformOrigin: 'left center' …

http://jsfiddle.net/ZtpEU/41/ 在jquery中有一个简单的动画.我正在尝试制作动画,只有当mouseenter发生时动画才会被执行.此外,您会注意到,如果您疯狂地进入鼠标并离开,则会记住元素动画,这基本上会使它们疯狂地生成动画.

我正在寻找只有当鼠标悬停在特定元素上时才执行此动画.如果移动,则动画将重置并为下一个悬停元素设置动画.

对不起,这真的很难说.我会非常专注于答案.最后,我正在寻找更多这种css过渡效果(这只发生在谷歌浏览器或我这样做)