【问题标题】:Angular JS + CoffeeScript + JSFiddle: Code not workingAngular JS + CoffeeScript + JSFiddle:代码不起作用
【发布时间】:2013-07-06 04:05:33
【问题描述】:

我今天开始使用 CoffeeScript 和 AngularJS,并注意到关于如何使用 CoffeeScript 正确编写 AngularJS 的文档或示例并不多。我自己的实验似乎没有奏效。作为一个教学练习,有人能指出我为什么这小提琴不起作用吗?

http://jsfiddle.net/dralexmv/8km8x/4/

它声称未定义 InventoryModule。虽然我已经在第一行声明了。

这是 HTML:

<div ng-app='InventoryModule' ng-controller='InventoryController'>
<table>
    <tr ng-repeat='item in items'>
        <td>{{item.title}}</td>
        <td>{{item.price | currency}}</td>
    </tr>
</table>

这是 CoffeeScript:

inventoryModule = angular.module 'InventoryModule', []

inventoryModule.factory 'Items', ->
    items = {}
    items.query -> [
        {title: 'Table', price: '5'},
        {title: 'Chair', price: '10'}
    ]
    items

inventoryModule.controller 'InventoryController', ($scope, Items) ->
    $scope.items = Items.query

【问题讨论】:

  • JSFiddle 它应该在选择 Angular 作为框架时自动将其添加到标记中。

标签: angularjs coffeescript jsfiddle


【解决方案1】:

您的代码包含以下内容

items.query -> [{title: 'Hello', price: '5'}]

翻译为:

  var items = {};
  items.query(function() { // Items has no method query
    return [{
        title: 'Hello',
        price: '5'
      }];
  });

你的意思是把一个成员定义为一个函数,所以它应该是:

items.query = () -> [{title: 'Hello', price: '5'}]

翻译为:

  var items = {};

  items.query = function() {
    return [{
        title: 'Hello',
        price: '5'
      }];
  };

你的意思是:)

(fiddle)

【讨论】:

  • 我明白了。棘手的 CoffeeScript 语法我还在习惯。
  • @AlexanderVentura 我很高兴能帮上忙。如果它有帮助,我已经完成了,并且看到了 AngularJS +CoffeeScript 的开发,这非常好:)
  • 最后一件事,当我将 $scope.items 更改为 $scope.items = Items.query 时,页面仍然无法解析。这是为什么呢?
  • @AlexanderVentura 它怎么知道是通话还是任务?没有参数:)你可以试试$scope.items = Items.query()
  • 我明白了,我试图将其保留为纯粹的 CoffeeScript 语法。再次感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-06-27
  • 2014-01-18
相关资源
最近更新 更多