Question

我是个有角度的新手。摆弄$ scope。

我在主视图中有这个片段：

    <div ng-controller="MainCtrl" class="ng-scope">
        <ul class="nav navbar-nav navbar-right">
        <li><a href="#" <span class="glyphicon glyphicon-shopping-cart  gi-2x"></span><span class="badge">{{ badgeCount }}</span></a></li>
        </ul>
    </div>

....
    <div class="container">
           <ui-view></ui-view>
    </div>

home.html通过ui-view加载在home.html里面，我有

    <div ng-repeat='item in items'>
        <td> <button type="submit" class="btn btn-default btn-lg btn-success" ng-model="orderCnt" ng-click="placeOrder(item.desc)"><span class="glyphicon glyphicon-cutlery"></span></button> </td>
    </div>

控制器是MainCtrl。我的控制器是：

controller('MainCtrl', ['$scope', function($scope, menus) {

  $scope.items = [];

  $scope.badgeCount = 0;
  $scope.orderCnt = 0;
  console.log("badgecount=",$scope.badgeCount)
  console.log("ordercnt=",$scope.orderCnt)

  $scope.placeOrder = function(value) {
    $scope.orderCnt ++;
    console.log(value)
    console.log($scope.orderCnt)
    console.log("ng click")
  };

  $scope.$watch('orderCnt', function(newVal, oldVal){
    console.log(newVal + " " + oldVal);
    $scope.badgeCount++;
    console.log("watch")
  },true);

对于placeOrder上的任何ng-click，我希望badgeCount也会在购物车图标上更新。它没有发生。我是否需要发出/广播它，因为它的视图不同？我在想，因为两个都有相同的控制器，相同的$ scope将被绑定。任何帮助将不胜感激。

Answer 1

您的容器div是<div ng-controller="MainCtrl" class="ng-scope">的孩子吗？如果没有，那么它们将具有不同的范围。一个人的变化不会在另一个人身上看到。

其他一些观点

您不需要在按钮上定义ng-model，因为它没有被更改，所以没有意义。
在这种情况下你为什么要看orderCnt？它只会在scope.placeOrder中更改，因此您可以在$scope.badgeCount++;

scope.placeOrder

编辑：如果您希望视图具有相同的范围，则可以将其作为主控制器的子级。另请注意，您在>

的定义中遗漏了<a href"#"

<body ng-controller="MainCtrl">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-shopping-cart  gi-2x"></span><span class="badge">{{ badgeCount }}</span></a></li>
    </ul>
    <div class="container">
      <ui-view></ui-view>
    </div>
</body>

angular js scope watch不更新bootstrap徽章计数器

1 个答案: