Question

我想做一个简单的延期承诺。但我一直收到这个错误：

<body ng-controller="MainCtrl"> <div ui-view="mainview"></div> </body>

我在 index.html 中有一个视图控制器指定代码：

ui-view

然后主视图的<div class="service" ng-controller="MainCtrl"> <h1>NATO Alphabet via Promise</h1> {{mainCtrl.hello}} <ul> <li ng-repeat="nato in mainCtrl.natoAlphabet">{{ nato }}</li> </ul> </div>位于 main.template.html 中：

'use strict';

angular.module('TestApp', [
    'ui.router',
    'testapp.models.main',
  ])
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('testapp', {
        url: '',
        views: {
          'mainview@': {
            controller: 'MainCtrl as mainCtrl',
            templateUrl: 'main.template.html'
          }
        }
      });
  })
  .controller('MainCtrl', function MainCtrl($scope, MainModel) {
    this.natoAlphabet = MainModel.getNato();
    // comment the line above to make the view appear
    this.hello = MainModel.hello;
  });

app.js ：

angular.module('testapp.models.main', [])
  .service('MainModel', function($q) {

    var getNato = function() {
      var deferred = $q.defer();

      deferred.resolve(['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India']);

      return deferred.promise;
    };

    this.getNato = getNato();

    this.hello = "Hello world!";

  });

及其 main.model.js 的模型控制器为：

TypeError: MainModel.getNato is not a function
    at new MainCtrl (app.js:20)
    at Object.invoke (angular.js:4523)
    at extend.instance (angular.js:9182)
    at nodeLinkFn (angular.js:8299)
    at compositeLinkFn (angular.js:7731)
    at compositeLinkFn (angular.js:7734)
    at publicLinkFn (angular.js:7611)
    at angular.js:1681
    at Scope.$eval (angular.js:16052)
    at Scope.$apply (angular.js:16152)

非常简单的东西，对吧？

但是我得到了

@WebServlet("/userOrders")
public class userOrdersServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        HttpSession session = request.getSession();
        int userId = (int) session.getAttribute("userId");
        UserDAO daoUser = (UserDAO) request.getAttribute("userDao");
        User user = daoUser.getUser(userId);
        List<Books> booksOrderedByUser = user.getBooks();
        request.setAttribute("booksOrderedByUser", booksOrderedByUser);
        request.getRequestDispatcher("/userOrders.jsp").forward(request, response);

    }

}

现在请参阅此代码：http://plnkr.co/edit/AcLK69KIkmkAh26Orsev?p=preview

我做错了什么？

感谢。

Answer 1

这一行：

this.getNato = getNato();

是否将getNato的结果分配给您的服务 - 您想要分配该功能，因此请忽略()

this.getNato = getNato;

Answer 2

您已在var getNato中分配了一项功能，因此仅在getNato

中指定this.getNato变量

像：

this.getNato = getNato

Answer 3

建立在@tymeJV上，我会这样清理它

angular.module('testapp.models.main', [])
  .service('MainModel', function($q) {

    var getNato = function() {
      var deferred = $q.defer();

      deferred.resolve(['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India']);

      return deferred.promise;
    };

    var service =  {

    getNato : getNato,
    hello : "Hello world!"

    }

    return service;

  });

Answer 4

您的代码可以简化为：

angular.module('testapp.models.main', [])
  .service('MainModel', function($q) {

    this.getNato = $q.when(['Alpha', 'Bravo', 'Charlie',
                            'Delta', 'Echo', 'Foxtrot',
                            'Golf', 'Hotel', 'India']);

    this.hello = "Hello world!";

});

是的，getNato不是一个函数，它是一个承诺。

要解决此问题，请使用promise的.then方法。

var vm=this;
MainModel.getNato.then (function (result) {
     vm.natoAlphabet = result;
});

AngularJS - 函数未从服务实例化

4 个答案: