Question

我还是AngularJS的新手，我只是想知道如何使用services语法正确定义factories，directories，controllers和CoffeeScript。< / p>

描述和解释“为什么以这种方式”将是完美的一些例子。

Answer 1

使用controller和CoffeeScript的TodoList的一个很好的例子：

angular.module('TodoApp').controller 'TodoCtrl', ($scope) ->

  $scope.todos = [
    {text: 'learn angular', done: true},
    {text: 'build an angular app', done: false}
  ]

  $scope.addTodo = ->
    $scope.todos.push({text: $scope.todoText, done: false})
    $scope.todoText = ''

  $scope.remaining = ->
    count = 0
    for todo in $scope.todos
      count += todo.done ? 0: 1
    count

  $scope.archive = ->
    oldTodos = $scope.todos
    $scope.todos = []
    for todo in oldTodos
      $scope.todos.push(todo) unless todo.done

Answer 2

与在CoffeeScript中编写普通的javascript函数不应该有任何不同。你可以转换js代码here。

js和CoffeeScript

中的jQuery dataTable插件指令示例

<强>的JavaScript

var app = angular.module('myApp');
app.directive('dTable', [
    '$compile', function ($compile) {
        'use strict';
        return {
            restrict: 'E',
            replace: true,
            template: '<table class=\"table table-striped table-bordered dataTable\"></table>',
            link: function (scope, element, attrs) {
                var dataTable,
                    options = {
                        "bStateSave": true,
                        "iCookieDuration": 2419200,
                        "bJQueryUI": false,
                        "bPaginate": true,
                        "bLengthChange": false,
                        "bFilter": true,
                        "bInfo": true,
                        "bDestroy": true,
                        "iDisplayLength": 10,
                        "sDom": "lftip",
                        "sPaginationType": "bootstrap",
                        "oLanguage": {
                            "sLengthMenu": "_MENU_ records per page"
                        }
                    },
                    opts = {};

                element = $(element);

                if (attrs.aaOptions) {
                    angular.extend(options, scope.$eval(attrs.aaOptions));
                }

                dataTable = element.dataTable(options);

            }
        };
    }
]);

<强>的CoffeeScript

app = angular.module("myApp")
app.directive "dTable", ["$compile", ($compile) ->
  "use strict"
  restrict: "E"
  replace: true
  template: "<table class=\"table table-striped table-bordered dataTable\"></table>"
  link: (scope, element, attrs) ->
    dataTable = undefined
    options =
      bStateSave: true
      iCookieDuration: 2419200
      bJQueryUI: false
      bPaginate: true
      bLengthChange: false
      bFilter: true
      bInfo: true
      bDestroy: true
      iDisplayLength: 10
      sDom: "lftip"
      sPaginationType: "bootstrap"
      oLanguage:
        sLengthMenu: "_MENU_ records per page"

    opts = {}
    element = $(element)
    angular.extend options, scope.$eval(attrs.aaOptions)  if attrs.aaOptions
    dataTable = element.dataTable(options)
]

如何使用CoffeeScript正确定义服务，工厂，目录和控制器

2 个答案: