我有一个像下面这样的组件,并希望测试该$onChange方法在绑定myBinding更改时的作用.
我整个上午都试过,但找不到办法解决这个问题.
angular
.module('project.myComponent', [])
.component('myComponent', {
bindings: {
myBinding: '<'
},
template: '<div>{{$ctrl.result}}</div>',
controller: myComponentController
});
function myComponentController($filter, someService) {
var ctrl = this;
ctrl.result = 0;
$ctrl.$onChange = function (changes) {
if(angular.isDefined(changes.myBinding)) {
if(angular.isDefined(changes.myBinding.currentValue)) {
if(angular.isDefined(changes.myBinding.currentValue != changes.myBinding.previousValue)) {
myService.doSomething(changes.myBinding.currentValue).then(
function(data) {
ctrl.result = changes.myBinding.currentValue * 3;
}
);
}
}
}
}
}
我希望我的测试表现得像是更改绑定值的组件父级.
require('angular-mocks');
describe('myComponment', function() {
var element, scope;
beforeEach(inject(function(_$rootScope_, _$compile_) {
}));
fit('should display the controller defined title', function() { …components unit-testing jasmine angularjs angularjs-components
从AngularJs 1.5升级到1.6状态时,$ compile中的更改的文档:
默认情况下禁用对组件/指令控制器实例的预分配绑定,这意味着它们将不再在构造函数内可用.
文档中的升级示例如下(缩写):
之前
.component('myComponent', {
bindings: {value: '<'},
controller: function() {
//...
}
})
后
.component('myComponent', {
bindings: {value: '<'},
controller: function() {
this.$onInit = function() {
// ...
};
}
})
我已经发现我必须使用相同的$ onInit函数为任何使用bindToController的指令:true就像这里:
.directive('acAllocation', acAllocation);
function acAllocation(SomeService) {
return {
restrict: 'E',
replace: true,
scope: {
allocation: '=acAllocation'
},
controller: acAllocationController,
controllerAs: 'vm',
bindToController: true,
templateUrl: 'path/acAllocation.html'
};
function acAllocationController() { …angularjs angularjs-directive angularjs-components angularjs-1.6
我正在使用Angular 1.5并试图从使用1.4中的ui-router迁移到1.5中的新组件路由器.
但是,当我更新到1.5时,我没有看到在我的配置中注入"$ router"的方法.
我知道我可以从这个存储库下载angular_1_router.js:https://github.com/brandonroberts/angularjs-component-router
但是新的路由器应该包含在1.5中吗？
对不起,似乎没有太多关于此的文档.只有过时的文档引用了Angular 1.4和Angular 2.0文档.
当我尝试使用angular_1_router.js文件时,我$injector:modulerr在尝试使用'ngComponentRouter'时得到了一个,所以我无法将该路由作为一种解决方法.
我正在研究Angular 1.5中的应用程序.我坚持使用基于组件的体系结构(https://docs.angularjs.org/guide/component)和那里描述的输入/输出流程.
到目前为止,它工作正常,但现在我需要打开一个子组件作为对话窗口,我卡住了.
从主组件开始渲染组件树时,该体系结构很好.但我不知道如何获得其中一个孩子并将其显示为对话框,仍然使用推荐的输入/输出流程.
你知道任何模式/库吗？
我是Angular的新手,我正在使用标准控制器和ngResource编写的简单CRUD应用程序来使用1.5中引入的组件.到目前为止,我发现的文档和资源都没有讨论如何:
所以我想知道是否有人可以就如何最好地进行提供一些指示.
我现有的应用程序有一个简单的工厂声明一个资源实体,一个控制器
$scope.newEntity = new Entity();$scope使用从后端检索的资源列表填充:Entity.query(function (data) { $scope.entities = data; });在HTML中,我有一个使用的表单$scope.newEntity和控制器保存方法,以将新实体保存到后端.我还有一个ng-repeat列出存储的条目$scope.entities,还有几个额外的ng-clicks来执行一些编辑和删除.
我现在要做的是在列表中实现一些内联编辑.我知道我可以用我现有的方法做到这一点,但我想干净地重用我在实体编辑代码中的现有实体创建表单中的表单验证功能,而不重复.组件看起来非常适合我的(公认的无经验)眼睛.
与基于组件的方法,我按照在文档https://docs.angularjs.org/guide/component下一个组件树的实施例,并创建了一个entity-list和entity-detail组件.到目前为止,这些工作还可以,我想我可以弄清楚如何连接on-delete和on-update事件.我无法弄清楚的是如何处理一个on-create事件.
我应该使用一个完全独立的控制器和我现有的简单形式来处理创建事件吗？如果是这样,我如何让现有列表自动更新？该创建事件是否会传播到列表控制器？
或者我在现有的列表控制器中遗漏了什么？或者实体创建是细节控制器的特例？
我正在寻找有关如何使用Angular组件和ngResource实现此功能的信息,因为我还想为Angular 2做好准备.除非组件和资源不能一起使用,否则请不要发布有关如何使用完全不同的方法实现这一点,或者如何在没有组件的情况下重用HTML代码.谢谢!
我不明白为什么当我更改输入中的绑定基元时,$ onChanges没有被启动.有人能看出我做错了什么,并以简单的方式解释这个问题吗？在我无法在实际应用程序中使用它之后,我做了一个快速测试应用程序的plunkr.
angular
.module('test', [])
.component('test', {
template: '<child application="vm.application"></child>',
controller: 'testCtrl as vm'
})
.controller('testCtrl', function() {
var vm = this;
vm.$onInit = function () {
vm.application = {
data: {
name: 'Test'
}
}
};
})
.component('child', {
template: '<input type="text" ng-model="vm.application.data.name">',
bindings: {
application: '<'
},
controller: 'childCtrl as vm'
})
.controller('childCtrl', function() {
var vm = this;
vm.$onChanges = function (changes) {
console.log('CHANGED: ', changes);
};
})
我正在使用 Angular 1.5 处理 2 个组件。
我想从孩子访问父母，我设法使用：
require: {
parent: '^parentCmp'
}
问题是，我想做同样的事情，但没有将父级“修复”为“parentCmp”，因为它并不总是我作为父级拥有的这个组件。
谢谢。
随着AngularJS V1.7的发布，已经不建议使用和删除将绑定预先分配给的选项：
由于38f8c9，指令绑定在构造函数中不再可用。
迁移代码：
- 如果指定
$compileProvider.preAssignBindingsEnabled(true)，则需要首先迁移代码，以便将标志翻转到false。有关如何执行此操作的说明，请参见 “从1.5迁移到1.6”指南。之后，删除该$compileProvider.preAssignBindingsEnabled(true)语句。
由于bcd0d4的缘故，默认情况下在控制器实例上禁用了预分配绑定。 强烈建议迁移您的应用程序，使其不尽快依赖它。
依赖于存在的绑定的初始化逻辑应该放在控制器的
$onInit()方法中，保证在分配了绑定之后总是调用该方法。
将代码移至$onInit生命周期挂钩的用例是什么？什么时候才能将代码保留在控制器构造函数中？
angularjs angularjs-directive angularjs-components angularjs-1.7
我们的项目目前仍在AngularJS(v1.6)+ TypeScript上运行,但我们希望通过实现组件来开始使应用程序升级到最新的Angular,类似于它们在Angular中的编写方式.目前我们不使用进口或出口,但希望逐步介绍.即我们想开始使用:
import * as angular from "angular";
import { MyComponentComponent } from './MyComponent.component';
export default angular
.module('myModule', [])
.component('myComponent', MyComponent);
代替
angular
.module('myModule', [])
.component('myComponent', MyComponent);
但是,目前这样做会导致范围问题.我们的应用程序现在具有全局变量angular,所有内容都附加到,而导入/导出创建注入单独实例的闭包angular,因此两者无法进行通信.
有没有办法结合这两种方法,以便我们可以逐步升级现有系统？
我正在使用两种方式数据绑定来设置组件间通信。我有一个父控制器，它从 AJAX 调用获取数据并将该数据发送到 2 个组件。
我尝试修改传递给组件的数据，但是如果 child1 组件更新数据，尽管存在两种方式数据绑定，但子组件不会获取更新数据。我读到 $onChanges 挂钩不会捕获双向数据绑定的更改事件。
<div ng-controller="ParentController as ctrl">
<child1 data="ctrl.data"></child1>
<child2 data="ctrl.data"></child>
</div>
父控制器：
var app = angular.module('app',[]);
app.controller('ParentController', function($scope, $get){
//get data from AJAX call
this.data = getDataFromAjaxCall();
}
Child1 组件：
app.component('child1',{
bindings : {
data : '='
},
controller: function($scope){
var self = this;
self.$onChanges = function(changes){
if(changes.data)
console.log('data changed');
}
self.addData = function(){
self.data.push({
id : 10,
name : 'abc'
});
}
}
});
Child2 组件：
app.component('child2',{
bindings : { …