$scope.$on 仅适用于第一视图

Question

我是 AngularJS 的新手，但运行我的 Ionic 应用程序出现问题。在我的一个观点中，我正在使用 ng-repeat 来显示来自 pouchDB 的值。但是，它仅在我第一次查看时有效。如果我离开视图然后返回它只是空白。我相信我已经确定问题出在我的控制器中。

我的看法：

<ion-view title="All">
  <ion-content padding="true">
    <div class="list" ng-controller="MyController">
      <div class="item item-button-right" ng-repeat="name in names">
      {{name.name}} 
      <button class="button button-clear button-assertive" ng-click="addFav(name.name)">
      <i class="icon ion-ios-heart-outline"></i>
      </button>
      </div>
    </div>      
  </ion-content>
</ion-view>

我的控制器：

app.controller("MyController", function($scope, $ionicPopup, PouchDBListener) {
  $scope.names = [];

  $scope.addFav = function(favName) {     
      $ionicPopup.alert({
          title: 'Favorite',
          template: favName + ' has been added',
          okText: 'OK'
      })
  }

  $scope.$on('add', function(event, name) {
      $scope.names.push(name);
  });
});

$scope.$on 似乎仅在第一个视图中运行，从而导致视图为空白。作为新手，我从教程中获得了上述代码，因此对于导致它的原因或如何修复它真的没有任何想法？

更新：

我的工厂有一个同步我的数据库的广播：

app.factory('PouchDBListener', ['$rootScope', function($rootScope) {

localDB.changes({
    continuous: true,
    onChange: function(change) {
        if (!change.deleted) {
            $rootScope.$apply(function() {
                localDB.get(change.id, function(err, doc) {
                    $rootScope.$apply(function() {
                        if (err) console.log(err);
                        $rootScope.$broadcast('add', doc);
                    })
                });
            })
        } else {
            $rootScope.$apply(function() {
                $rootScope.$broadcast('delete', change.id);
            });
        }
    }
});

return true;
 }]);

我的控制器也需要广播吗？

Answer 1

最初$scope.names = [];

$scope.$on 是一个事件侦听器，因此应该有 $scope.$emit 或 $scope.$broadcast 才能加载您的数组。

因此，在第一次加载时，通过 $scope.$emit 或 $scope.$broadcast 发生了一些事件，并且使用 $scope.$on 进行了侦听，因此您的数组被加载了。

我认为当您切换视图并返回时不会再发生这种情况。

解释请看最后一条评论

我刚刚修改了你的 plunker

http://embed.plnkr.co/CZuqLzkU0wd0Soskvi2j/preview

希望这对您有所帮助!!!!!!

$scope.$on 仅适用于第一视图

$scope.$on only works on first view

angularjs

angularjs-scope

angularjs-ng-repeat

ionic