javascript - AngularJS - 函数未从服务实例化

标签 javascript angularjs

我正在尝试做出一个简单的延期 promise 。但我不断收到此错误:

MainModel.getNato 不是函数

我在 index.html 中有一个特定的 View Controller ,如下所示:

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

然后在 ma​​inviewui-view 中位于 ma​​in.template.html 中:

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

app.js 是:

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

ma​​in.model.js的模型 Controller 是:

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!";

  });

很简单的东西,对吧?

但是我越来越

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)

查看此代码:http://plnkr.co/edit/AcLK69KIkmkAh26Orsev?p=preview

我做错了什么?

谢谢。

最佳答案

这一行:

this.getNato = getNato();

正在将 getNato 的结果分配给您的服务 - 您想要分配该函数,因此省略 ()

this.getNato = getNato;

关于javascript - AngularJS - 函数未从服务实例化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34141363/

相关文章:

javascript - 一个URL可以激活多个脚本吗?

javascript - 修改 Event.prototype 来实现跨浏览器 event.preventDefault(); 是不是一个坏主意?

angularjs - 更改 ui-view 指令处理页面转换的方式

angularjs - 自定义指令(如 ng-repeat)

javascript - 如何检测位置哈希的变化?

javascript - 将索引传递给自定义 orderBy 函数

javascript - 是什么让这个伪 GUID 生成器比 math.random() 更好?

javascript - 在 angularjs 应用程序中使用 requirejs 和 AMD 有什么好处?

html - 幻灯片 Angular 不起作用

javascript - 带功能的 ionic 自动完成取消标签