最近我在https://angular.io/docs/ts/latest/tutorial/上开始了Angular 2教程.
然后我继续使用Angular 2 beta 8.现在我恢复了教程,最新的测试版是beta 14.
如果我只是更新npm更新一些模块(预装了教程)更新但不是Angular2(我可以看到npm ls).
如果我做npm更新角度2或npm更新angular2@2.0.0beta.14它也没有做任何事情.
我有以下HTML:
<div style="border:1px solid; height:300px; width:500px; position:relative; left:100px" id="canvas">
<tbox ng-repeat="tb in textBoxes" ng-model="tb">
</tbox>
</div>
以及2个指令
appModule.directive('resizable', function($compile, $document) {
return {
restrict: "A",
template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}" ng-transclude><span class="scale">s</span></div>',
transclude: true,
replace: true,
require: 'ngModel'
}
});
appModule.directive('tbox', function($document) {
return {
restrict: "E",
template: '<div class="editbox" resizable editoptions>{{tb.text}}</div>',
replace: true
}
});
究竟是什么角度投掷我的意思是什么？
Error: Multiple directives [tbox, resizable] asking for template on: <div class="editbox" resizable="" editoptions="" ng-repeat="tb in textBoxes" ng-model="tb">
jsfiddle at http://jsfiddle.net/sEZM3/
我正在使用app.component.ts文件中的Angular 2快速入门代码.
该文件如下所示:
import {Component} from 'angular2/core';
@Component({
selector: 'app',
template: `<h1>Title Here</h1>'
})
export class AppComponent { }
这按预期工作.
我想要做的是在同一页面上添加另一个组件...所以我尝试了这个:
import {Component} from 'angular2/core';
import {ComponentTwo} from 'angular2/core';
@Component({
selector: 'app',
template: `<h1>Title Here</h1>'
}),
@Component({
selector: 'appTwo',
template: `<h1>Another Title Here</h1>'
})
export class AppComponent { }
这不起作用......是我做错了还是不允许这样做？
我有一个简单的contactList组件,它有2个绑定:contacts和onRemove.
contacts 只是一组要显示的联系人onRemove 是一个回调函数app
.component('contactList', {
template:
`<div ng-repeat="c in $ctrl.contacts">
{{c.name}}
<div ng-click="$ctrl.onRemove({contact: c})">Remove</div>
</div>`,
bindings: {
contacts: '<',
onRemove: '&'
},
controller: function() {}
})
我在我的应用程序中多次使用此组件.而onRemove回调可以表现不同,这取决于其中的contactList组件习惯.例:
contactMainView(=组件)显示搜索栏以及使用该contactList组件生成的联系人列表.onRemove将从数据库中删除联系人.
groupMembersView使用contactList组件显示属于给定组的所有联系人.这里不应该删除联系人,但onRemove不会设置.
首先我想,我可以使用ng-if="$ctrl.onRemove"但不起作用,因为onRemove它永远不会undefined在contactList组件中.console.log(this.onRemove)总是打印:function(locals) { return parentGet(scope, locals); }
当然我可以使用另一种showRemove: '@'绑定,但这对我来说看起来并不干净.
你有任何想法或更好的解决方案来完成任务吗？
angularjs angularjs-directive angularjs-bindings angularjs-components
我循环遍历一个有6个对象的数组,并使用ngFor,我想只循环4个元素.我怎么能这样做？
<div class="item active" *ngFor="#data of lengthArray">
content
</div>
在LengthArray我有6但是如何循环到4个记录？
而且我想从另一个div中的第4条记录循环到第6条记录.我怎样才能从第4条记录开始？
我使用Angularjs 1.5版来验证表单中的输入.
但是,它不能使用呈现组合的自定义指令.组合根据传递给它的参数检索项目名为'listId'.然后,它使用ng-repeat在'lookupItems'上迭代.我想有些东西丢失了,比如ngModel.为什么以及如何实施它？
组合指令:
app.directive('combo', function($http) {
return {
restrict: 'AE',
template: '<div class="input-group"> <select ng-model="selectedItem">' +
'<option ng-repeat="option in lookupItems" value={{option.ListValueID}}>{{option.Translation.Value}}</option></select>' +
' {{selectedItem}} </div>',
replace: true,
scope: {
listId: '=',
defaultItem: '=',
selectedItem: '='
},
controller: function($scope) {
$http({
method: 'GET',
url: '/home/listvalues?listid=' + $scope.listId
}).then(function(response) {
$scope.lookupItems = response.data;
}, function(error) {
alert(error.data);
});
},
link: function(scope, element, attrs) {}
};
});
html视图:迭代包含要呈现的控件类型的属性,然后根据'attribute.Required'将其设置为布尔值,这是真的.
<form name="profileAttributesForm" ng-controller="metadataCtrl" class="my-form">
<div ng-repeat="a in attributes">
<div ng-if="a.DataType == 1"> …required-field angularjs angularjs-directive angularjs-forms
我正在使用Angular 2.0 Alfa 35.当我导入时FORM_DIRECTIVES(这是formDirectivesAlfa 35 的新名称)我收到了一个Typescript错误:
error TS2305: Module '"angular2/angular2"' has no exported member 'FORM_DIRECTIVES'.
这是ts定义中的错误吗？我可以修复/覆盖它吗？
我希望ngIf在范围内的数组中有特定值时触发.
所以我在我的范围内有这个:
var orders = [{
"order_no": 1,
"color": ["blue", "pink", "red"]
}, {
"order_no": 2,
"color": ["yellow", "blue", "white"]
}];
我希望有一个ngIf显示一个元素,例如,如果其中一个颜色数组中存在黄色(假设我事先不知道数据范围,但事先知道结构).
我发现这样做的唯一方法是事先知道范围的结构,所以fx ng-if="orders[1].color[0] === 'yellow'"
谢谢!