在这种情况下，似乎不能让ng-model工作

Can't seem to get ng-model to work in this instance

本文关键字：ng-model 工作 不能 这种情况下      更新时间：2023-09-26
<div class="col-lg-3">
    <input type="text" id="hourHours" ng-model="hourHours" class="form-control" style="width: 60px" placeholder="hh" />
</div>
<button type="button" class="btn" ng-click="addSubscriptionModel()">submit</button>
下面是我的简单html代码和我的ng-model。如果我在input中输入5,angular代码应该是console.log out 5，但它仍然没有定义… 
var SomeController = function ($scope, $modalInstance) {
    $scope.addSubscriptionModel = function () {
        console.log($scope.hourHours);
    }
});

编辑:实际代码…似乎我忘了说我正在使用tabset，这可能是它不起作用的原因…

 <tabset>
     <tab heading="Hour" select="hourOption()" ng-model="hour">
         <div class="col-lg-3">
             <input type="text" id="hourHours" ng-model="hourHours" class="form-control" style="width: 60px" placeholder="hh" />
         </div>
     </tab>
 </tabset>

终于想通了…从外部按钮

中清除与Angular Bootstrap UI选项卡内textarea关联的ng-model

Jeffrey A Gochin的想法是对的…我确实需要在我的控制器中为我的两个对象设置"值"。

$scope.hour = {
    hours: "",
    minutes: ""
};
然后在我的按钮函数中，我可以访问$作用域。

这里没有看到足够的细节，但是当您的页面从数据源加载和填充时，您通常需要设置模型[scope]的属性来初始化您的页面。简而言之，您正在做的是双向绑定。因此，如果您希望在控制器中显示页面之前填充页面，则需要在执行控制器时设置作用域上的值。在您的页面中输入新的数据范围(或模型)后，它将自动更新为屏幕上的值。

更新

作为后续。我了解到明智地使用$compile和$interpolate可以在很大程度上解决以下问题:它们允许您执行对作用域的后期绑定。此外，虽然我仍然不太了解它，完全了解何时使用它，transclusion也可以有所帮助。

看看这段代码的工作，检查你的控制台窗口

<!DOCTYPE html>
<html lang="en" data-ng-app="app">
  <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>


  </head>
  <body  ng-controller="MyCtrl">
   <div class="col-lg-3">
    <input type="text" id="hourHours" ng-model="hourHours" class="form-control" style="width: 60px" placeholder="hh" />
  </div>
  <button type="button" class="btn" ng-click="addSubscriptionModel()">submit</button>
  </body>
</html>

<script>
  var app = angular.module('app',[]);
app.controller('MyCtrl', function($scope){

    $scope.addSubscriptionModel = function () {
        console.log($scope.hourHours);
    }

});
</script>

有透透性和$compile的东西。我通过在div标签中包含类似表单的内容而不是尝试动态加载它们来解决这个问题。你可以通读标签代码，然后谷歌这个问题。除了我描述的黑客之外，目前没有其他修复方法。

问题的关键是需要$compile选项卡内容后，它加载，但当前版本的选项卡不能正常工作。有一些递归问题会在错误的条件下导致堆栈溢出。Git上有一个公开的问题

相关文章：