Question

我正在使用AngularJS，Play Framework和MongoDB构建一个新项目。我的代码基于Typesafe Activator的现代Web模板。目前我可以创建新对象并在列表中显示它们。下一步是编辑一个对象，这就是我遇到问题的地方。

在我的分类列表中，我的表格中有以下链接：

<td><a ng-href="/#/categories/edit/{{cat.category}}">edit</a></td>

我的app.coffee（Angular.js routung）：

angular.module('myApp.routeConfig', ['ngRoute'])
    .config ($routeProvider) ->
        $routeProvider
        .when('/categories/edit/:category', {
                templateUrl: '/assets/partials/categories/edit.html'
                controller: '/assets/javascripts/categories/EditCategoryCtrl'
            })

EditCategoryCtrl.coffee ：

class EditCategoryCtrl

constructor: (@$log, @$location,  @CategoryService, @category) ->
    @category = @CategoryService.findCategoryByCategory(category) // should load the category, but the constructor doesn't get invoked (see below)


editCategory: (category: String) ->
    @CategoryService.editCategory(@category)
    .then(
        (data) =>
            @category = data
            @$location.path("/categories")
        ,
        (error) =>
            @$log.error "Unable to edit Category: #{error}"
        )
controllersModule.controller('EditCategoryCtrl', EditCategoryCtrl)

我的播放路线文件：

GET     /categories/edit/:category  @controllers.Categories.findByCategory(category: String)
PUT     /categories/edit/:category  @controllers.Categories.edit(category: String)

如上所述， EditCategoryCtrl.coffee 中的构造函数未被调用，并且在javascript控制台中抛出以下错误：

Error: [ng:areq] Argument '/assets/javascripts/categories/EditCategoryCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.13/ng/areq?p0=%2Fassets%2Fjavascripts%2Fcategories%2FEditCategoryCtrl&p1=not%20a                 nanunction%2C%20got%20undefined

我希望我提供所有必要的代码（如果没有，请告诉我）。希望任何人都能指出我正确的方向。谢谢！

修改我的CategoryService.coffee：

findCategoryByCategory: (category) ->
        @$log.debug "findCategoryByCategory()"
        @$log.debug category
        deferred = @$q.defer()

        @$http.get("/categories/edit/:category", category)
        .success((data, status, headers) =>
                @$log.info("Successfully loaded Category - status #{status}")
                deferred.resolve(data)
            )
        .error((data, status, headers) =>
                @$log.error("Failed to load Category - status #{status}")
                deferred.reject(data);
            )
        deferred.promise

EDIT2

在Valentin的帮助下，我现在可以将Category对象加载为JSON并将其记录到我的控制台：

"Successfully loaded Category - status 200"
Object { category: "test", description: "test", status: Object }

但仍然没有任何内容呈现给我的观点edit.html：

<div ng-controller="EditCategoryCtrl as ecc"><!-- other stuff --> 
<input type="text" class="form-control" name="category" id="category" ng-model="ecc.category.category">

这似乎不起作用。问题是否可能在异步查询完成之前呈现？如果是，我怎么能阻止这个？

Answer 1

category没有依赖注入，因为它是一个URL参数。

您可以从$routeParams服务中检索它，例如：

controllersModule.controller('EditCategoryCtrl',
  ['$log', '$location', 'CategoryService', '$routeParams', '$scope',
    ($log, $location, CategoryService, $routeParams, $scope) ->
      CategoryService.findCategoryByCategory($routeParams.category)
      .then((category) ->
        $scope.category = category
      )
  ])

或在路线声明中使用resolve，例如：

$routeProvider
  .when('/categories/edit/:category', {
    templateUrl: '/assets/partials/categories/edit.html'
    controller: '/assets/javascripts/categories/EditCategoryCtrl'
    resolve: {
      category: ['$routeParams','CategoryService', ($routeParams, CategoryService) -> CategoryService.findCategoryByCategory($routeParams.category)]
    }
  })

如果findCategoryByCategory是异步的，您很可能会想要使用第二种方法。

最后，您的对象不会被渲染，因为它永远不会导出到$scope（参见上文）。以下是HTML的外观：

<div ng-controller="EditCategoryCtrl"><!-- other stuff --> 
<input type="text" class="form-control" name="category" id="category" ng-model="category.category">

你真的不应该把控制器视为一个类，而是一个注入服务和$scope对象的函数，让你用显示逻辑绑定HTML和服务。

使用AngularJS和Play进行CRUD

1 个答案: