小编Gra*_*ham的帖子

backbone.js和/或knockout.js中的AngularJS示例

我正在比较这些框架,以便在客户端进行一些计算.我真的很喜欢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)

javascript-framework backbone.js angularjs knockout.js

9
推荐指数
2
解决办法
7985
查看次数

AngularJS bootstrap ui - 如何更改css样式?

我正在使用带有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元素样式的最佳方法是什么?

css twitter-bootstrap angularjs angular-bootstrap

9
推荐指数
1
解决办法
5012
查看次数

如何在AngularJS中设置重复的元素id?

我想做点什么:

<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

8
推荐指数
1
解决办法
3万
查看次数

如何使用AngularJS进行网络摄像头操作?

以前我把工作的网络摄像头代码放到我的应用程序中,但是现在当我更新到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对象传递给控制器​​.

javascript webcam dom angularjs

8
推荐指数
1
解决办法
3395
查看次数

消除Julia元编程中的各种引用机制的歧义

有人可以清楚地列出Julia中可用于元编程的各种引用机制,并以最小的例子说明每一个吗?

因此很清楚在哪种情况下使用哪种...

据我所知,有:

  • :(someExpr; maybeMore)
  • quote; ...expressions... end; 这与上面几乎相同,仅用于调试目的的行号
  • Expr(:quote, x)其中(根据@totalverb)相当于Meta.quot(x)
  • QuoteNode(根据Jeff Bezanson所说)"仅用于内部AST表示,而不是宏.除非你在编译器的后期工作,否则可以安全地忽略."

这份清单是否全面?我错过了任何其他陈述吗?

metaprogramming quoting julia

8
推荐指数
1
解决办法
309
查看次数

Webpack - 不要为某个入口点输出一个包

我使用文件加载器自动渲染一堆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加载器,我可以放在加载器链的末尾来杀死束发射?

javascript node.js webpack pug-loader

8
推荐指数
1
解决办法
651
查看次数

MAVEN:在当前项目和插件组 [org.apache.maven.plugins, org.codehaus.mojo] 中找不到前缀“依赖”的插件

[错误] 在当前项目和插件组 [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)

maven-2

8
推荐指数
2
解决办法
1万
查看次数

如何在 pug 中定义 vue 模板?

如何让 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。

javascript vue.js pug

8
推荐指数
1
解决办法
7660
查看次数

将AngularJS函数转换为服务

我有以下功能,我想转换为服务.

我如何将$ 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)

谢谢!

javascript angularjs

7
推荐指数
2
解决办法
8882
查看次数

Angular2路由

我在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)

angular2-routing angular

7
推荐指数
2
解决办法
2830
查看次数