javascript - Angular $scope 函数在 ng-repeat 之外不起作用

Question

我有一个 <table>元素，我在其中声明了一个 Controller (目前应用程序中只有一个)。我还有一个 ng-repeat在 <tr>在<tbody>元素，它工作得很好，按预期创建了多个表行。在 Controller 中，我有一些 api 调用，它们被调用用于单个表行并且工作得很好，还有一个函数从 <th> 之一调用。在 <thead> 中，我无法开始工作。我知道这是一个范围问题，但我无法理解我做错了什么。

总结一下:

简化的 html 片段:

<table ng-controller='myController'>
    <thead>
         <tr>
             <th>Username</th>
             <th><button ng-click='doStuff()'>Do stuff</button></th>
         </tr>
    </thead>
    <tbody>
         <tr ng-repeat='user in users'>
             <td>{{user.name}}</td>
             <td><button ng-click='delete(user)'>Delete</button>
         </tr>
    </tbody>
</table>

简化的 js 片段:

app.controller('myController', ['$scope', '$http', users, function($scope, $http, users) {
    //api call to get users, working fine
    users.getAll().success(function(data) {
        $scope.users = data;
    });

    //api call to delete users, also working fine
    $scope.delete = function(user) {
        users.delete(user).success(function() {});
    };

    //can't get this to fire
    $scope.doStuff = function() {
        alert('I do stuff');
    };
}]);

任何见解都会有所帮助，提前致谢!

编辑

我假设问题出在其中一个模块中，所以我将整个内容复制到 plnkr 中.对样式感到抱歉，已将其删除以简化代码。

编辑 2

在研究了 plnkr 之后，我发现它是一个未关闭的 <div> <thead> 中的元素.哎哟。感谢您的回复，请原谅我的粗心。

编辑 3

更仔细的研究表明，问题实际上也在于设计不当的 Jasmine 单元测试。

Answer 1

它似乎在开火。我不得不模拟 users 的异步加载，但这应该没什么区别。你能添加一个片段来演示这个问题吗？

 angular.module('app', []).controller('myController', ['$scope', '$http', '$timeout',
   function($scope, $http, $timeout) {
     //api call to get users, working fine

     $timeout(function() {
       $scope.users = [{
         name: 'A'
       }, {
         name: 'B'
       }];
     }, 1000);

     //api call to delete users, also working fine
     $scope.delete = function(user) {
       console.log('delete', user);
     };


     $scope.doStuff = function() {
       console.log('I do stuff');
     };
   }
 ]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="app">

  <table ng-controller='myController'>
    <thead>
      <tr>
        <th>Username</th>
        <th>
          <button ng-click='doStuff()'>Do stuff</button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='user in users'>
        <td>{{user.name}}</td>
        <td>
          <button ng-click='delete(user)'>Delete</button>
      </tr>
    </tbody>
  </table>
</div>