Javascript AngularJS无法识别函数

我遇到了和你一样的问题

当我试图从服务调用函数时，我从angular js得到以下错误

TypeError: $scope.watchlist.addStock is not a function

这是我下面的控制器

angular.module('stockDogApp')
  .controller('WatchlistCtrl', function ($scope,$routeParams,$modal,WatchlistService,CompanyService) {
    $scope.companies = CompanyService.query();
    $scope.watchlist = WatchlistService.query($routeParams.listId);
    console.log($scope.watchlist);
    $scope.stocks = $scope.watchlist.stocks;
    $scope.newStock = {};
    var addStockModal = $modal({
      scope : $scope,
      templateUrl : 'views/templates/addstock-modal.html',
      show: false
    });

    $scope.showStockModal = function(){
      addStockModal.$promise.then(addStockModal.show);
    };

    $scope.addStock = function(){
      $scope.watchlist.addStock({
        listId : $routeParams.listId,
        company: $scope.newStock.company,
        shares: $scope.newStock.shares
      });
      addStockModal.hide();
      $scope.newStock = {};
    };

当我记录$scope.watchlist时，该函数似乎确实存在于对象中

Object {name: "Saklep", description: "Saklep", id: 0, stocks: Array[0]}
addStock: function(stock)
arguments: (...)
caller: (...)
length: 1
name: ""

这是模式窗口的html

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title">Add New Stock</h4>
      </div>

      <form role="form" id="add-stock" name="stockForm">
        <div class="modal-body">
          <div class="form-group">
            <label for="stock-symbol">Symbol</label>
            <input type="text"
              class="form-control"
              id="stock-symbol"
              placeholder="Stock Symbol"
              ng-model="newStock.company"
              bs-options="company as company.label for company in companies"
              bs-typeahead
              required>
          </div>
          <div class="form-group">
            <label for="stock-shares">Shares Owned</label>
            <input type="number"
              class="form-control"
              id="stock-shares"
              placeholder="# Shares Owned"
              ng-model="newStock.shares"
              required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit"
            class="btn btn-success"
            ng-click="addStock()"
            ng-disabled="!stockForm.$valid">Add</button>
          <button type="button"
            class="btn btn-danger"
            ng-click="$hide()">Cancel</button>
        </div>
      </form>
    </div>
  </div>
</div>

---

结果是Angular Yeoman在app.js中自动生成了一个controllerAs函数，这就是冲突的原因

  .when('/watchlist/:listId', {
    templateUrl: 'views/watchlist.html',
    controller: 'WatchlistCtrl',
    // controllerAs: 'watchlist'
  })

---

注释掉controllerAs就成功了

如果您显示

WatchlistService

的代码会很有帮助，但这似乎是一个

$resource

。在本例中，您没有将

监视列表

设置为

监视列表服务

的实例，而是将其设置为等于

查询

返回的对象。在您的位置，我将打开开发工具并在调用

addStock

函数之前放置断点。请注意，如果您正在使用对象浏览器上的

console.log

引用内存中的该对象，则不会显示调用函数时该对象的外观，而是显示它现在的外观。@Claies-添加了该服务。@GoranLepur-我有点新，所以我不太明白添加断点有何帮助。我试过一段时间-也许我做得不对，但我看到它显示了它从angular源文件调用的各种函数。下一步是什么？@Kunkka，只需添加

var

在函数的第一行，将断点放在那里，用

ng单击调用函数，点击断点后，可以悬停所有变量以获取当前值。
  .when('/watchlist/:listId', {
    templateUrl: 'views/watchlist.html',
    controller: 'WatchlistCtrl',
    // controllerAs: 'watchlist'
  })