我正在比较这些框架,以便在客户端进行一些计算.我真的很喜欢AngularJS网站上的例子.我想知道网站上的任何backbone.js或knockout.js专家是否会在各自的框架中重新创建该示例.
这是JSFiddle.
小提琴代码:
<table ng:init="invoice= {items:[{qty:10, description:'gadget', cost:9.95}]}">
<tr>
<th>Qty</th>
<th>Description</th>
<th>Cost</th>
<th>Total</th>
<th></th>
</tr>
<tr ng:repeat="item in invoice.items">
<td><input name="item.qty" value="1" size="4" ng:required ng:validate="integer"></td>
<td><input name="item.description"></td>
<td><input name="item.cost" value="0.00" ng:required ng:validate="number" size="6"></td>
<td>{{item.qty * item.cost | currency}}</td>
<td>[<a href ng:click="invoice.items.$remove(item)">X</a>]</td>
</tr>
<tr>
<td><a href ng:click="invoice.items.$add()">add item</a></td>
<td></td>
<th>Total:</th>
<td>{{invoice.items.$sum('qty*cost') | currency}}</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
<!--
Workaround for jsfiddle to pass in ng:autobind
http://doc.jsfiddle.net/basic/introduction.html#css
-->
<script src="http://code.angularjs.org/angular-0.9.10.min.js" ng:autobind></script>
<style>
table th {
font-weight: bold;
}
table td …Run Code Online (Sandbox Code Playgroud) 我正在使用带有AngularJS指令的bootstrap UI,我想更改默认样式bootstrap适用于其元素.
我应该从模板中定位HTML内容吗?
基于文档中给出的示例,我想使用手风琴.
当我在HTML中定义它时,它具有以下结构:
<accordion>
<accordion-group heading="my heading">
content here
</accordion-group>
Run Code Online (Sandbox Code Playgroud)
但是当指令处理模板时,它会将其转换为以下HTML:
<accordion close-others="oneAtATime"><div class="panel-group" ng-transclude="">
<div class="panel panel-default ng-isolate-scope" heading="my heading">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span ng-class="{'text-muted': isDisabled}" class="ng-binding">content here</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
<div class="panel-body" ng-transclude=""><span class="ng-scope">some content here</span></div>
</div>
Run Code Online (Sandbox Code Playgroud)
正如您所看到的,它会非常显着地改变它.如果我想更改面板标题的显示方式,我应该在我的css文件中写这个吗?
div.panel {}
Run Code Online (Sandbox Code Playgroud)
并希望模板将来不会改变?
更改指令模板生成的HTML元素样式的最佳方法是什么?
我想做点什么:
<div class='row' ng-repeat='row in _.range(0,12)'>
<div id='{{row}}'></div>
</div>
Run Code Online (Sandbox Code Playgroud)
但在控制器中我尝试:
function SetterForCatanCtrl($scope) {
$scope._ = _;
try {
var tile = document.getElementById('5');
tile.style.backgroundImage = "url('aoeu.png')";
} catch (e) {
alert(e)
}
}
Run Code Online (Sandbox Code Playgroud)
getElementById 返回null,那么如何使用AngularJS变量设置元素的id?
以前我把工作的网络摄像头代码放到我的应用程序中,但是现在当我更新到AngularJS v1.5.0时它不起作用.我正在使用与v1.3.0完美配合的webcam-directive.
这是我的代码:
<webcam placeholder="selfiePlaceHolder"
on-stream="onStream(stream)"
on-access-denied="onError(err)" on-streaming="onSuccess(video)">
</webcam>
Run Code Online (Sandbox Code Playgroud)
但是现在它给AngularJS v1.5.0带来了以下错误:
未捕获的错误:[$ parse:isecdom]不允许在Angular表达式中引用DOM节点!表达式:onSuccess(视频) http://errors.angularjs.org/1.5.0/ $ parse/isecdom?p0 = onSuccess(视频)
我也试着使用不同的解决方案AngularJS NG-摄像头,但即使它的演示页是不是为我工作.
注意: 我知道问题是我们无法从较新版本的AngularJS访问DOM,但相同的代码适用于旧版本.我需要知道如何将"Video"DOM对象传递给控制器.
有人可以清楚地列出Julia中可用于元编程的各种引用机制,并以最小的例子说明每一个吗?
因此很清楚在哪种情况下使用哪种...
据我所知,有:
:(someExpr; maybeMore)quote; ...expressions... end; 这与上面几乎相同,仅用于调试目的的行号Expr(:quote, x)其中(根据@totalverb)相当于Meta.quot(x)这份清单是否全面?我错过了任何其他陈述吗?
我使用文件加载器自动渲染一堆pug模板到静态html文件,但webpack也输出一个基于入口点的无意义文件
例如,这是在我的webpack.config.js中:
entry: {
'js/build/bundle.js': './js/app.js',
'this-shouldnt-emit': './pug/.pug.js' //pug entry point
},
output: {
path: path.join(__dirname, '../'),
filename: '[name]'
},
...
// pug loading module rule
{
test: /\.pug$/,
include: path.resolve(__dirname, "../pug"),
use: [
"file-loader?name=[path][name].html&context=./pug",
"pug-html-loader?pretty&exports=false"
]
}
Run Code Online (Sandbox Code Playgroud)
我this-shouldnt-emit在根构建目录中得到一个捆绑文件,我不想要.
如何阻止文件加载器发出输出包,但不干扰它生成当前所有的静态html文件.是否有一个插件或某种类型的null加载器,我可以放在加载器链的末尾来杀死束发射?
[错误] 在当前项目和插件组 [org.apache.maven.plugins, org.codehaus.mojo] 中找不到前缀“dependency”的插件,可从存储库 [local (C:\Users\mdhore.m2 \repository),中央(https://repo.maven.apache.org/maven2)] -> [帮助 1]
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>3.0.2</version>
<executions>
<execution>
<id>copy-dependencies</id>
<phase>package</phase>
<goals>
<goal>copy-dependencies</goal>
</goals>
<configuration>
<!-- configure the plugin here -->
</configuration>
</execution>
</executions>
</plugin>
</plugins>
Run Code Online (Sandbox Code Playgroud) 如何让 Vue.js 识别字符串模板中的 Pug?例子:
Vue.component('my-component', {
template: `
div
div`})
Run Code Online (Sandbox Code Playgroud)
我看到了如何在独立模板中完成此操作,例如:
<template lang='pug'>
div
div
</template>
Run Code Online (Sandbox Code Playgroud)
但我希望能够在字符串模板中使用 pug。
我有以下功能,我想转换为服务.
我如何将$ resource调用提取到AngularJS服务中,我将如何调用此服务?
self.select = function (email) {
var Player = $resource('/player/get',{email:email});
var player = Player.get(function() {
self.selectedPlayer.email = player.email;
self.selectedPlayer.fuel = player.fuel;
self.selectedPlayer.cargo = player.cargo;
self.selectedPlayer.food = player.food;
});
}
Run Code Online (Sandbox Code Playgroud)
谢谢!
我在Angular中遵循这个路由教程,它只是不起作用.当我使用'comp'选择器来放置它的HTML代码时,它可以正常工作,但是当我尝试使用路由器插座进行路由时,它只显示来自的标头index.html.
我有以下内容:
main.ts:
import * as ng from 'angular2/angular2';
import {Comp} from './comp';
@ng.Component({
selector: 'my-app'
})
@ng.View({
directives: [ng.formDirectives, ng.RouterOutlet],
template: `
<nav>
<ul>
<li>Start</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<main>
<router-outlet></router-outlet>
</main>
`
})
@ng.RouteConfig([{ path: '/', component: Comp }])
class AppComponent {
}
ng.bootstrap(AppComponent, [ng.routerInjectables]); Run Code Online (Sandbox Code Playgroud)
comp.ts:
import * as ng2 from 'angular2/angular2';
@ng2.Component({
selector: 'comp'
})
@ng2.View({
template: `
<h1>hi<h1>
`
})
export class Comp {
constructor() {
}
}Run Code Online (Sandbox Code Playgroud)
index.html的:
<!DOCTYPE html>
<html> …Run Code Online (Sandbox Code Playgroud)angularjs ×5
javascript ×4
angular ×1
backbone.js ×1
css ×1
dom ×1
julia ×1
knockout.js ×1
maven-2 ×1
node.js ×1
pug ×1
pug-loader ×1
quoting ×1
vue.js ×1
webcam ×1
webpack ×1