javascript - Bootstrap Angular 模态问题

Question

对于我的应用程序(我正在使用 angular-meteor/urigo 在 Meteor 中编写)，我有一个按钮，单击该按钮会出现一个模型。

代码:

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">

           <div class="modal-body" ng-controller="formCtrl">
             <div ng-repeat="item in meal.items">
                <label>Item {{$index+1}} :
                    <input type="text" class="item" ng-model="item.name"><br>
                </label>
                <label>Calories :
                    <input type="number" class="calories" ng-model="item.cal">
                </label>
                <br>
             </div>
           </div>

           <div class="modal-footer">
              <button ng-click="addItem()" type="button" class="btn btn-primary">+Item</button>
           </div>
       </div>
    </div>
   </div>
 </div>

在第一个“modal-body”类中，我非常有信心我的代码是正确的，因为它是我之前所做的，现在我只是实现 Bootstrap 以使其看起来更优雅。

问题发生在“modal-footer”类中，第二个按钮的 ng-click 应该产生 2 个输入:

 Item 1 : [______]
 Calories : [_______]

但由于某种原因，它不会执行该功能。在过去的 8 个小时里，我一直盯着这个问题，试图找出错误，但似乎找不到任何错误。

Answer 1

您正在调用 formCtrl 外部的方法。移动 div.modal-content 上的 ng-controller 属性，或移动包含 ng-controller 的 div 内的 button 属性