角度控制器不打印要查看的变量答案

【问题标题】：Angular controller not printing variables to view角度控制器不打印要查看的变量
【发布时间】：2017-03-27 04:30:46
【问题描述】：

Angular 控制器不与视图对话。包含ng-app，也是ng-controller。

使用 meanJS。

这里是视图：

<section ng-app="my-module" ng-controller="MyModuleController">
  <div>
    {{ costumers[0] }}
  </div>
</section>

这里是控制器：

(function() {
  'use strict';

  angular
    .module('my-module')
    .controller('MyModuleController', MyModuleController);

  MyModuleController.$inject = ['$scope'];

  function MyModuleController($scope) {
    var vm = this;

    // My module controller logic
    // ...

    $scope.costumers = [{
      name: 'John Doe',
      city: 'New York'
    }, {
      name: 'Peter Griffin',
      city: 'San Francisco'
    }];

    init();

    function init() {

    }
  }
})();

【问题讨论】：

浏览器控制台中的任何内容？
你能看到正确的 HTML 吗？
@Mr.Arjun angular.js:11706 错误：[ng:areq] 参数“MymoduleController”不是函数，未定义
如果不是现有的App那么module('my-module',[])
@Michelem 你是什么意思？

标签： javascript angularjs view controller

【解决方案1】：

尝试使用vm 代替$scope：

function MyModuleController($scope) {
    var vm = this;

    vm.costumers = [{
      name: 'John Doe',
      city: 'New York'
    }, {
      name: 'Peter Griffin',
      city: 'San Francisco'
    }];

    init();

    function init() {

    }
  }

HTML：

<section ng-app="my-module" ng-controller="MyModuleController as vm">
  <div>
    {{ vm.costumers[0] }}
  </div>
</section>

【讨论】：

那么你还有其他问题
对不起，我忘了你也需要改变这个：<section ng-app="my-module" ng-controller="MyModuleController as vm">

【解决方案2】：

像这样初始化空的依赖注入器到应用模块

  angular
    .module('my-module',[])
    .controller('MyModuleController', MyModuleController);

一点旁注。如果您希望在控制器内部使用this 声明变量，请避免使用scope。在 html 中也使用控制器作为

(function() {
  'use strict';

  angular
    .module('my-module',[])
    .controller('MyModuleController', MyModuleController);

  MyModuleController.$inject = ['$scope'];

  function MyModuleController($scope) {
    var vm = this;

    // My module controller logic
    // ...

    $scope.costumers = [{
      name: 'John Doe',
      city: 'New York'
    }, {
      name: 'Peter Griffin',
      city: 'San Francisco'
    }];

    init();

    function init() {

    }
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="my-module" ng-controller="MyModuleController">
  <div>
    {{ costumers[0] }}
  </div>
</section>

【讨论】：

【解决方案3】：

脱了几根头发后，我解决了这个问题。问题出在路由文件中，控制器名称中的一个简单拼写错误。 “参数 'MymoduleController' 不是函数，未定义”在浏览器控制台中列出，表明它拼写错误。它旨在成为 MyModuleController，而不是 MymoduleController。谢谢各位大神帮忙，问题解决了！

这里是固定路由文件：

(function() {
  'use strict';

  //Setting up route
  angular
    .module('my-module')
    .config(routeConfig);

  routeConfig.$inject = ['$stateProvider'];

  function routeConfig($stateProvider) {
    // My module state routing
    $stateProvider
      .state('my-module', {
        url: '/my-module',
        templateUrl: 'modules/my-module/client/views/my-module.client.view.html',
        controller: 'MyModuleController',
        controllerAs: 'vm'
      });
  }
})();

【讨论】：