小编Bri*_*ian的帖子
流星中多视图的最佳实践方法？
我可以为流星找到的每个教程/示例都显示了一个视图应用程序.我想建立一些更复杂的东西.我不清楚如何处理多个视图...最好是以一种可扩展的方式？
推荐指数
解决办法
查看次数
如何使Twitter Bootstrap按钮组与AngularJS一起使用？
我正在尝试创建一个简单的twitter bootstrap按钮组,允许用户选择几个选项之一(想想单选按钮).我已经达到了影响模型变化的程度,但"活动"状态没有正确设置为onclick ...除非我再次点击它？我创造了一个小提琴,基本标记如下......
<div range="justified"
model="myModel"
options="rangeOptions"></div>
<hr/>
<div range="vertical"
model="myModel"
options="rangeOptions"></div>
<hr/>
<pre>myModel:{{myModel}}</pre>
<script type="text/ng-template" id="range.tpl.html">
<div class="btn-group btn-group-{{type}}" data-toggle="buttons">
<span class="btn btn-lg btn-primary"
ng-repeat="option in options"
ng-class="{active:option.id==model.range_id}" <!-- not working?? -->
ng-click="activate(option.id)">{{option.label}}</span>
</div>
</script>
function Main($scope) {
$scope.rangeOptions = [
{id:1,label:"Agree"},
{id:2,label:"Neutral"},
{id:3,label:"Disagree"}
];
$scope.myModel = {range_id: 2};
}
angular
.module('range', [])
.directive('range', function () {
return {
replace: true,
scope: { type:'@range', model:'=', options:'=' },
templateUrl:'range.tpl.html',
controller: function ($scope,$element,$attrs) {
$scope.activate = function …推荐指数
解决办法
查看次数
通过routerLink定位命名插座会增加无关的"/"
我正试图通过路由在我的应用程序中启动模式.一切似乎都有效,除了向URL添加额外的斜杠以防止它解析.Url应该看起来像这样(如果我手动输入它会起作用)......
/accounts(modal:accounts/1/edit)
但我得到了这个(注意基本网址和出口目标之间的斜线)......
/accounts/(modal:accounts/1/edit)
基本标签已设置...
<head>
<meta charset="utf-8">
<title>myApp</title>
<base href="/">
...
</head>
这是我的路由配置(accounts-routing.module.ts)
const ACCOUNT_ROUTES: Routes = [
{
path: 'accounts',
component: AccountsIndexComponent
},{
path: 'accounts/new',
component: AccountsNewComponent
},{
path: 'accounts/:id',
component: AccountsShowComponent
},{
path: 'accounts/:id/edit',
component: AccountsEditComponent,
outlet: 'modal'
}
];
和插座(app.component.html)
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
和链接......
<a [routerLink]="[{ outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>
我错过了什么？该项目是利用创建angular-cli@1.0.0-beta.26和angular@2.4.6和angular-router@3.4.6安装.
FWIW,这是日志的截图...
推荐指数
解决办法
查看次数
Angular 2 路由器不解析子辅助路由
我正在尝试为模态窗口使用辅助路由。无论我尝试什么，我都无法解决。我只是收到路由错误。这是我的方法...
应用程序组件.html
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
admin-routing.module.ts
...
const ROUTES: Routes = [
{
path: 'admin',
component: AdminComponent,
children: [
{
path: 'accounts',
loadChildren: './accounts/accounts.module#AccountsModule'
},{...}
]
}
];
...
账户-routing.module.ts
...
const ROUTES: Routes = [
{
path: '',
children: [
{
path: '',
component: AccountsIndexComponent
},{
path: 'new',
component: AccountsNewComponent
},{
path: ':id',
component: AccountsShowComponent
},{
path: ':id/edit',
component: AccountsEditComponent,
outlet: 'modal'
}
]
}
];
...
modal.service.ts
...
constructor(
private router:Router,
private route:ActivatedRoute
) { }
open(route:Array<any>) { …推荐指数
解决办法
查看次数
如何在自包含的Angular 2组件中包含字体
我有一个组件,需要自定义字体作为依赖项.我希望该组件能够处理字体本身的导入,因此它是可移植的.此外,我们的项目使用angular-cli,所以无论如何我无法控制webpack.config.
我希望angular-cli足够聪明,如果我在组件中进行了简单的导入,就可以移动字体,但它不会在构建时移动.
import '.my-custom-font.woff'; // doesn't work
无论如何,简单地说我需要将字体移动到构建目录,我可以从我的css中引用它...
@font-face {
font-family: "Custom Font";
src: url("??????/my-custom-font.woff") format("woff")
}
推荐指数
解决办法
查看次数
在打字稿中扩展数组原语（angular-cli 项目）
我需要能够轻松对集合进行排序，并且我选择扩展 Array 原语。我意识到在大多数情况下这被认为是不好的做法，但这只会在内部使用（不是共享库）。无论我尝试过什么方法，我都没有得到有效的结果。我不断收到错误：TypeError: Attempted to assign to readonly property。这是我最近一次迭代的简化示例。我在操场上有一个更完整的版本，所以我假设他的问题在于 angular-cli 配置/构建过程？？？
interface Array<T> {
$sortBy(sortKey:string): T[];
}
if (!Array.prototype['$sortBy']) {
Object.defineProperty(Array.prototype, '$sortBy', {
value: function(sortKey) {
return this.sort( function(a, b) { // TypeError here???
if (a[sortKey] < b[sortKey]) { return -1; }
if (a[sortKey] > b[sortKey]) { return 1; }
return 0;
});
}
}
}
我也试过这种方法，但我的 IDE (VSCode) 给了我错误： [ts] Property '$sortBy' does not exist on type 'any[]'.
Intellisense error here
|
V
Array.prototype.$sortBy = …推荐指数
解决办法
查看次数
标签 统计
angular ×4
typescript ×3
angular-cli ×2
modal-dialog ×2
router ×2
angularjs ×1
data-binding ×1
extend ×1
fonts ×1
import ×1
javascript ×1
jquery ×1
meteor ×1
outlet ×1