0

I'm still new in AngularJS and I just wondering how to properly define services, factories, directories and controllers using CoffeeScript syntax.

Some example with description and explanation "why in this way" will be perfect.

4

2 回答 2

2

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

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
于 2013-07-25T09:28:59.320 回答
1

它应该与在CoffeeScript. 你可以在这里转换你的 js 代码。

js中的jQuery dataTable插件指令示例和CoffeeScript

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);

            }
        };
    }
]);

咖啡脚本

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)
]
于 2013-07-25T09:34:50.513 回答