小编J.P*_*rge的帖子

使用templateUrl时,isolateScope()返回undefined

我有一个我想要进行单元测试的指令,但我遇到的问题是我无法访问我的隔离范围.这是指令:

<my-directive></my-directive>
Run Code Online (Sandbox Code Playgroud)

它背后的代码:

angular.module('demoApp.directives').directive('myDirective', function($log) {
    return {
        restrict: 'E',
        templateUrl: 'views/directives/my-directive.html',
        scope: {},
        link: function($scope, iElement, iAttrs) {
            $scope.save = function() {
                $log.log('Save data');
            };

        }

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

这是我的单位测试:

describe('Directive: myDirective', function() {
    var $compile, $scope, $log;

    beforeEach(function() {
        // Load template using a Karma preprocessor (http://tylerhenkel.com/how-to-test-directives-that-use-templateurl/)
        module('views/directives/my-directive.html');
        module('demoApp.directives');
        inject(function(_$compile_, _$rootScope_, _$log_) {
            $compile = _$compile_;
            $scope = _$rootScope_.$new();
            $log = _$log_;
            spyOn($log, 'log');
        });
    });

    it('should work', function() {
        var el = $compile('<my-directive></my-directive>')($scope);
        console.log('Isolated scope:', el.isolateScope());
        el.isolateScope().save();
        expect($log.log).toHaveBeenCalled(); …
Run Code Online (Sandbox Code Playgroud)

unit-testing angularjs angularjs-directive karma-runner

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

告诉ngAnimate仅动画ngShow/ngHide

我有一个AngularJS 1.2.2 Web应用程序<div>,我根据某些$scope属性显示/隐藏它.使用该ngAnimate模块,我动画显示和隐藏<div>.

<div id="square" ng-show="showSquare" class="animate-shiny"></div>
Run Code Online (Sandbox Code Playgroud)

我也有一个课我想放在这个上<div>,为此我使用ngClass.

<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div>
Run Code Online (Sandbox Code Playgroud)

并且当它发生时,有时候该类在<div>显示/隐藏时被应用.这导致显示/隐藏动画不再起作用,显然它发现ngClass动画更有趣,即使我不想ngAnimate用于该动画.

这是一个演示行为的Plnkr.单击显示/隐藏按钮效果很好,单击make cool按钮效果很好,但组合这两个按钮会导致显示/隐藏动画中断.

我该如何解决?我可以在没有手动寻址的情况下完成$animate吗?

提前致谢!

animation angularjs ng-animate

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

组件使用内联模板进行转换

我正在使用Angular 2-rc3并且Component我想要以一种不同的方式应用转换.这是我的组件:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'my-list',
    template: `<ul>
        <li *ngFor="let item of data">
            -- insert template here --
            <ng-content></ng-content>
        </li>
    </ul>`
})
export class MyListComponent {
    @Input() data: any[];
}
Run Code Online (Sandbox Code Playgroud)

我这样使用它:

<my-list [data]="cars">
    <div>{{item.make | uppercase}}</div>
</my-list>
Run Code Online (Sandbox Code Playgroud)

如您所见,我正在尝试定义将由我的组件使用的内联模板.现在这非常错误.首先,一个数据绑定异常说出来can't read property 'make' of undefined.它试图读取item.make我周围的组件,而不是MyListComponent.但即使我暂时禁用此功能:

<my-list [data]="cars">
    <div>{item.make | uppercase}</div>
</my-list>
Run Code Online (Sandbox Code Playgroud)

然后出现第二个问题:

-- insert template here --
-- insert template here --
-- insert template here --
-- …
Run Code Online (Sandbox Code Playgroud)

angular2-components angular

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

EF5代码首先使用ASP.NET Web API:更新具有多对多关系的实体

我正在尝试Customer使用ASP.NET Web API和Entity Framework 5代码优先更新我的数据库,但它无法正常工作.我的实体看起来像这样:

public class CustomerModel
{
    public int Id { get; set; }
    public string Name { get; set; }

    // More fields

    public ICollection<CustomerTypeModel> CustomerTypes { get; set; }
}

public class CustomerTypeModel
{
    public int Id { get; set; }
    public string Type { get; set; }

    [JsonIgnore]
    public ICollection<CustomerModel> Customers { get; set; }
}
Run Code Online (Sandbox Code Playgroud)

没有什么特别的.我已经构建了一个Web界面,用户可以通过提供名称和检查一个或多个客户类型来添加客户.点击提交按钮时,数据将发送到我的Web API方法:

public void Put([FromBody]CustomerModel customer)
{
    using (var context = new MyContext())
    {
        context.Customers.Attach(customer);
        context.Entry(customer).State = …
Run Code Online (Sandbox Code Playgroud)

many-to-many ef-code-first asp.net-web-api entity-framework-5

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

addEventListener 中的 useCapture 行为奇怪

我正在尝试理解useCaptureJavaScript 中的参数addEventListener()。这是我的 HTML:

<div id="wrapper">
    <button id="button">Click me</button>
</div>
Run Code Online (Sandbox Code Playgroud)

这是我的 JavaScript:

document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper capture'); }, true);
document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper bubble'); }, false);
document.getElementById('button').addEventListener('click', function () { console.log('Button bubble'); }, false);
document.getElementById('button').addEventListener('click', function () { console.log('Button capture'); }, true);
Run Code Online (Sandbox Code Playgroud)

现在,我预计顺序是Wrapper capture, Button capture, Button bubble, Button bubble。令人惊讶的是,这是我的输出:

Wrapper capture
Button bubble
Button capture
Wrapper bubble
Run Code Online (Sandbox Code Playgroud)

两个按钮处理程序混淆了?我在其他浏览器中进行了测试,但 Chrome、Firefox 和 IE10 都显示相同的行为。我对此有点困惑。MDNQuirksMode.org规范都清楚地描述了不同的阶段以及捕获阶段如何先于冒泡阶段。为什么我的小实验会导致Button bubble处理程序在我的之前被调用Button …

javascript addeventlistener dom-events

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

Angular 2 RC 2如何将路由器注入自定义ExceptionHandler

我正在使用Angular 2 RC2.我需要将Angular 2路由器注入我的自定义ExceptionHandler类.但是我收到以下错误

错误:错误:无法解析'ErrorHandler'(?)的所有参数.确保所有参数都使用Inject进行修饰或具有有效的类型注释,并且"ErrorHandler"使用Injectable进行修饰.

我确实试过装饰私有路由器:使用@Inject的路由器无济于事.我正在使用打字稿,因此我认为我不需要@Inject属性.

我的自定义ExceptionHandler看起来像这样

import { ExceptionHandler } from '@angular/core';
import { Router } from '@angular/router';

export class ErrorHandler extends ExceptionHandler{

    constructor(
        private router: Router 
    ){
        super(null, null);

    }

    call(error, stackTrace = null, reason = null) {
        console.log(error);
        this.router.navigate(['/error']);
    }
}
Run Code Online (Sandbox Code Playgroud)

我的主要看起来像这样

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

import { provide, ExceptionHandler } from '@angular/core';
import { ErrorHandler } from './error-handler/error-handler';

import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } …
Run Code Online (Sandbox Code Playgroud)

angular2-routing angular

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