HTML标签加载时调用AngularJS函数失败，无法获取REST数据

你的代码存在几个关键问题，导致无法正常调用AngularJS函数并获取REST服务返回的数据，我来帮你逐一修正：

1. 控制器写法错误：构造函数不应返回对象 #

AngularJS的控制器构造函数不需要返回值，你需要把方法直接挂载到控制器实例（this）上——因为你用了controller as ctrl的语法。原来的return{...}写法不会把方法绑定到控制器实例，导致模板里ctrl.getuserloginmenu()根本找不到对应的方法。

修正后的app.js：

var app = angular.module('devportal', []);
app.controller('AppController', function($http) {
  // 用vm作为this的别名，避免this指向混乱（AngularJS最佳实践）
  var vm = this;
  
  // 把方法挂载到控制器实例上
  vm.getuserloginmenu = function(){
    $http.get('/getuserloginmenu').then(function(response){
      // 数据存到控制器实例的属性上，方便模板通过ctrl访问
      vm.loginmenu = response.data;
    });
  };
  
  vm.getuserloginmenu1 = function(){
    $http.get('/getuserloginmenu1').then(function(response){
      vm.loginmenu1 = response.data;
    });
  };
  
  // 控制器初始化时自动调用方法，无需依赖模板指令
  vm.getuserloginmenu();
});

2. 模板使用了无效指令：on-init不是AngularJS指令 #

你模板里的on-init是不存在的指令，AngularJS对应的初始化指令是ng-init。不过更推荐的是直接在控制器里调用方法（上面代码已经实现），这样逻辑更集中、更易维护。

另外，因为用了controller as ctrl语法，模板里的变量必须通过ctrl访问，所以ng-repeat要改成menu in ctrl.loginmenu。

修正后的login_menu.html：

<div ng-controller="AppController as ctrl">
  <!-- 如果控制器已经自动调用方法，这里可以去掉ng-init -->
  <div>
    <p ng-repeat="menu in ctrl.loginmenu">{{menu}}</p>
  </div>
</div>

额外优化建议 #

• 不要滥用ng-init：除了简单的变量初始化，复杂的方法调用建议放在控制器里执行，避免模板和逻辑耦合。
• 添加错误处理：在$http请求里加上.catch()分支，方便调试请求失败的情况，比如：

vm.getuserloginmenu = function(){
  $http.get('/getuserloginmenu')
    .then(function(response){
      vm.loginmenu = response.data;
    })
    .catch(function(error){
      console.error('获取菜单失败:', error);
    });
};

这样修改后，你的代码应该就能正常调用REST服务并渲染返回的数组数据了。

内容的提问来源于stack exchange，提问作者Shashi Ranjan