$watchCollection 不更新页面上的数组长度

Question

我正在尝试为用户拥有的警报数量设置一个计数器。如果我控制台记录 $scope.alerts 和 $scope.count，我可以看到两者都在更新，但使用 {{alerts.length}} 或 {{count}} 作为 #msgCount 的值只会给我pageLoad 上的初始计数，并且不会在数组长度更改时更新。我做错了什么？

我的控制器：

myApp.controller('globalAlerts', ['$scope', '$http', function ($scope, $http) {
        $scope.alerts = [{
    "type": "warning",
    "msg": "This is a generic alert. It is best suited for one or two line messages."
},
{
    "type": "danger",
    "msg": "<strong>Past Due!</strong> You have an invoice <a class=\"invoice-link\" href=\"\">192607</a> that is past due. <a href=\"invoices.html\">View all invoices.</a>"
},
{
    "type": "success",
    "msg": "This green alert indicates something positive occurred. Doesn't that make you feel happy?"
},
{
    "type": "info",
    "msg": "This blue alert is another generic warning usually used to inform. Isn't it soothing?"
}
];
    $scope.$watchCollection('alerts.length', function() {
        return $scope.alerts.length;

    }, true);
    $scope.closeAlert = function(index) {
      $scope.alerts.splice(index, 1);
    };



    $scope.dynamicPopover = {
            templateUrl: 'partials/alerts/globalAlerts.html',
            title: 'Recent Alerts'
    };

}]);

还有标记：

<div id="upperNav" ng-controller = "globalAlerts">
        <a class="btn btn-link" id="msg" popover-placement="bottom" uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" >
        <div class="badge badge-warning" id="msgCount">{{alerts.length}}</div>
        ALERTS</a></div>

使用弹出框标记：

<div id="alertCntr" ng-controller = "globalAlerts">
         <uib-alert ng-show="alerts.length" ng-repeat="alert in alerts track by $index" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>  
         <p ng-hide="alerts.length">You ain't got no more alerts, kid!</p>   
</div>

Answer 1

对于其他用户：

HTML 规定每个块都有自己的控制器。这意味着 2 个控制器是独立的，不知道彼此的警报数组何时被触摸过。

最简单的解决方案是嵌套 HTML，以便它们共享一个控制器：

<div id="upperNav" ng-controller = "globalAlerts">
    <a class="btn btn-link" id="msg" popover-placement="bottom" uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" >
    <div class="badge badge-warning" id="msgCount">{{alerts.length}}</div>
    ALERTS</a>
    <div id="alertCntr">
       <uib-alert ng-show="alerts.length" ng-repeat="alert in alerts track by $index" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>  
       <p ng-hide="alerts.length">You ain't got no more alerts, kid!</p>   
     </div>
</div>

编辑：

更新的 plnkr 完全符合您的要求：http://plnkr.co/edit/AIwGi7eIzilsGGL7Us3G?p=preview

Answer 2

您在 watch 函数之后添加了另一个参数。像这样。

$scope.$watchCollection('alerts.length', function() {
    $scope.count = $scope.alerts.length;
    return $scope.count;
},true);

你必须提出另一个论点（真），这意味着“深度观察”。这适用于查看嵌套对象或对象数组时。

您也可以在此处查看。 How to deep watch an array in angularjs?

顺便说一句，将 ng-model 放入 div 是没有用的

<div class="badge badge-warning" id="msgCount">{{alerts.length}}</div>

这就够了。

Answer 3

当您想在两个控制器之间进行通信时，您可以使用 $broadcast 或使用 service 来存储值。我更喜欢使用服务，您以后也可以在其他情况下使用此“serviceForStoringValue”。

.controller('controller1',function($scope,serviceForStoringValue){
  $scope.getCount = serviceForStoringValue.getCount;
})
 -----------------
.controller('controller2',function($scope,serviceForStoringValue){
  $scope.$watch('',function(n,o){
     serviceForStoringValue.setCount(n.length);
  },true)
})
-----------------
.factory('serviceForStoringValue',function(){
   var count;
   function getCount(){
     return count;
   }
   function setCount(n){
      count = n;
   }

   return {
    getCount:getCount,
    setCount:setCount
   }
 })


<div>{{getCount()}}<div>

Answer 4

非常感谢 KreepN 给了我一些指导。我终于意识到模板中的控制器调用是不必要的，因为 div 呈现在主页上的控制器 div 中。一旦我删除了所有内容都属于我的控制器标记，并且计数按预期工作。