我使用AngularJS v1.2.0-rc.2和ui-router v0.2.0.我想引荐的状态转移到另一种状态,所以我使用toParams的$state.go,像这样:
$state.go('toState', {referer: $state.current.name});
根据文档,这应该填充$stateParams在toState控制器上,但它是undefined.我错过了什么？
我创建了一个插件来演示:
我使用AngularJS的v1.2.0-rc.3和Jasmine测试框架.
我试图断言控制器调用服务方法.service方法返回一个promise.控制器看起来像这样:
angular.module('test', [])
.controller('ctrl', ['$scope', 'svc', function ($scope, svc) {
$scope.data = [];
svc.query()
.then(function (data) {
$scope.data = data;
});
}]);
我想测试在解析服务方法的延迟时将数据分配给范围.我已经为服务创建了一个模拟,单元测试看起来像这样:
describe('ctrl', function () {
var ctrl, scope, svc, def, data = [{name: 'test'}];
beforeEach(module('test'));
beforeEach(inject(function($controller, $rootScope, $q) {
svc = {
query: function () {
def = $q.defer();
return def.promise;
}
};
scope = $rootScope.$new();
controller = $controller('ctrl', {
$scope: scope,
svc: svc
});
}));
it('should assign data to scope', function () {
spyOn(svc, 'query').andCallThrough();
deferred.resolve(data); …我使用Angular 2.0.0-rc.4和RxJS 5.0.0-beta.6.
我正在尝试从事件中创建可观察流的不同方法,但是被选项所淹没,并且想要征求意见.我很欣赏没有一个适合所有人的解决方案,并且有适合课程的马匹.可能还有其他我不了解或未考虑的技术.
该角2组件交互菜谱提供了一个父组件与子组件的事件进行交互的几种方法.但是,只有父和子通过服务进行通信的示例使用了可观察对象,对于大多数情况来说似乎有点过分.
场景是模板的元素发出大量事件,我想定期知道最新值是什么.
我使用1000ms Observable的sampleTime方法来监视<p>HTML元素上的鼠标位置.
1)此技术使用ElementRef注入组件的构造函数来访问nativeElement属性并通过标记名称查询子元素.
@Component({
selector: 'watch-child-events',
template: `
<p>Move over me!</p>
<div *ngFor="let message of messages">{{message}}</div>
`
})
export class WatchChildEventsComponent implements OnInit {
messages:string[] = [];
constructor(private el:ElementRef) {}
ngOnInit() {
let p = this.el.nativeElement.getElementsByTagName('p')[0];
Observable
.fromEvent(p, 'mousemove')
.sampleTime(1000)
.subscribe((e:MouseEvent) => {
this.messages.push(`${e.type} (${e.x}, ${e.y})`);
});
}
}
共识意见似乎对这种技术不屑一顾,因为Angular2提供了对DOM的充分抽象,因此很少(如果有的话)需要直接与它进行交互.但是这种fromEvent工厂方法Observable使得使用起来很诱人,这是第一种想到的技术.
2)这种技术使用的EventEmitter是一种Observable.
@Component({
selector: …我有一个分布在多个标签上的表单.最初,我使用了ui-bootstrap的tabset指令,但后来要求深层链接到特定的选项卡,所以我想我会使用ui-router的嵌套视图.
我遇到的问题是父表单只在所有子表单有效时才有效,但是使用ui-router状态,一次只加载一个子表单.
的index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="script.js"></script>
</head>
<body class="container-fluid">
<div ui-view>
<ul class="list-unstyled">
<li><a ui-sref="edit.basic">Basic</a></li>
<li><a ui-sref="edit.extended">Extended</a></li>
</ul>
</div>
</body>
</html>
的script.js
angular.module('app', ['ui.router']).
config(function($stateProvider) {
$stateProvider.state('edit', {
abstract: true,
url: '/edit/',
templateUrl: 'edit.html',
controller: function($scope) {
$scope.model = {};
}
}).
state('edit.basic', {
url: '/basic',
templateUrl: 'basic.html'
}).
state('edit.extended', {
url: '/extended',
templateUrl: 'extended.html'
});
});
edit.html
<div class="row" ng-form="editForm">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<li …我正在使用AngularJS的v1.2.0 rc2,并想知道为多个控制器提供通用功能的最佳方法是什么.
我有以下验证功能,我想在编辑模型的所有控制器中使用:
$scope.canSave = function (formController) {
return formController.$dirty && formController.$valid;
};
$scope.validationClasses = function (modelController) {
return {
'has-error': modelController.$invalid && modelController.$dirty,
'has-success': modelController.$valid && modelController.$dirty
};
};
我想保持我的控制器干,所以我定义了一个工厂如下:
angular.module('myModule', [])
.factory('validationFactory', [function () {
return {
validationClasses: function (modelController) {
return {
'has-error': modelController.$invalid && modelController.$dirty,
'has-success': modelController.$valid && modelController.$dirty
};
},
isFormValid: function (formController) {
return formController.$dirty && formController.$valid;
}
};
}]);
最初,我只是将工厂混合到需要它的控制器中,如下所示:
$scope.canSave = validationFactory.isFormValid;
$scope.validationClasses = validationFactory.validationClasses;
但我意识到我可以将它们添加到模块的run方法中的$ rootScope中,如下所示:
angular.module('myModule', [])
.run([
'$rootScope',
'validationFactory', …我有一个带有手表的控制器,它使用来自lodash的debounce延迟过滤列表500ms.
$scope.$watch('filter.keywords', _.debounce(function () {
$scope.$apply(function () {
$scope.filtered = _.where(list, filter);
});
}, 500));
我想写一种模拟输入未发现之后所发现的关键词过滤关键字茉莉花测试.
我最初的尝试是在为关键字分配一个新值后使用$ digest,我认为这是因为去抖而无效.
it('should filter list by reference', function () {
expect(scope.filtered).toContain(item);
scope.filter.keywords = 'rubbish';
scope.$digest();
expect(scope.filtered).not.toContain(item);
scope.filter.keywords = 'test';
scope.$digest();
expect(scope.filtered).toContain(item);
});
所以我尝试使用$ timeout,但这也不起作用.
it('should filter list by reference', function () {
expect(scope.filtered).toContain(item);
$timeout(function() {
scope.filter.keywords = 'rubbish';
});
$timeout.flush();
expect(scope.filtered).not.toContain(item);
$timeout(function() {
scope.filter.keywords = 'test';
});
$timeout.flush();
expect(scope.filtered).toContain(item);
});
我还尝试给$ timeout一个大于debounce设置的500ms的值.
其他人如何解决这个问题？
编辑:我找到了一个解决方案,它将期望包装在$ timeout函数中,然后在范围上调用$ apply.
it('should filter list by reference', function () { …我正在使用 AngularJS v1.2.0-rc.3。
我有一个模型 y 与模型 x 有 1 对多的关系。
最初，我有一个模型 y 的表单，其中包含多个 xs 选择，如下所示：
控制器：
function test($scope) {
$scope.xs = [
{id:1, value:'value 1'},
{id:2, value:'value 2'},
{id:3, value:'value 3'}
];
$scope.y = {xs:[2]};
}
看法：
<div ng-controller="test">
<select multiple ng-model="y.xs" ng-options="x.id as x.value for x in xs">
</select>
</div>
结果是所选项目的数组。
http://plnkr.co/edit/s3tvvHeyE17TVH5KNkPZ
一切都很好，但我需要将其更改为复选框列表，并发现我不能再使用数组了。
我尝试使用中继器的索引，如下所示：
<div ng-repeat="x in xs">
<input type="checkbox" ng-model="y.xs[$index]" ng-true-value="{{x.id}}"/>
{{x.value}}
</div>
但是为了预先选择第二个项目，我需要使用这个：
$scope.y = {xs: [null, '2']};
这是没用的。
http://plnkr.co/edit/9UfbKF2gFLnhTOKu3Yep
经过一番搜索，似乎推荐的方法是使用对象哈希，就像这样
<div ng-repeat="x in xs">
<input type="checkbox" …