Question

我知道关于角度$ scope的问题有很多，经过几个小时我仍然无法弄清楚是什么问题。我正在使用带有离子的Angular.js，但问题应该与角度相关。

在我的应用程序中，我需要一个“添加到心愿单”功能。在productDetail视图中，当有人tapps“添加到心愿单”时，我将此产品与服务和webSQL一起添加到数据库中。现在，当用户进入心愿单视图时，我会获得所有保存产品，但视图不会更新。

我有一个带有Ionic侧边菜单的文件menu.html：

  <ion-side-menu side="left" expose-aside-when="large" width="72">
        <ion-content>
          <ion-list ng-controller="LeftMenuCtrl">
        <ion-item nav-clear menu-close ng-href="#/app/wish" ng-click="updateWishList()" ng-class="{'current': isActive('/app/wish')}">
          <span class="icon icon-menu-wish"></span>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

“LeftMenuCtrl”将鼠标悬停在活动菜单项上。在我的WishListView中，我想展示当前添加的产品：文件wishList.html

<ion-view hide-nav-bar="true" view-title="WISHLIST" ng-controller="WishlistCtrl">
  <div class="bar bar-header bar-stable">
    <div class="header-wrapper">
      <!--heading-->
      <div class="dash-slider-wrapper"" >
        <div class="header-text-main">WHISH</div> <div class="header-text-sub">LIST</div>
      </div>
    </div>
  </div>
  <ion-content class="has-header">
    <ion-item class="product-card" ng-repeat="product in products">
      <div class="card">
        EAN: {{product.ean}}
      </div>
    </ion-item>
  </ion-content>
</ion-view>

控制器：

app.controller("WishlistCtrl", function($scope, $state, productService) {

//gets called when the controller is loaded

    productService.getWishlistProducts().then(function (products) {
      $scope.products = products;
    });

//gets called when the user clicks on the navi but does not 
//update the $scope (or it updates the wrong $scope)

    $scope.updateWishList = function () {
      productService.getWishlistProducts().then(function (products) {
        $scope.products = products;
      });
    };
  })

有谁能告诉我这里有什么不对吗？

修改这是菜单链接的状态：

  .state('app.wish', {
    url: "/wish",
    views: {
      'menuContent': {
        templateUrl: "templates/wish.html"
      }
    }
  })

EDIT2： 当我刷新页面时，我看到所有添加的产品。但不是马上。它就像

$scope.updateWishList = function () ...

创建另一个$ scope ...

EDIT3：

app.controller('ProductDetailCtrl', function($stateParams ,$state, $scope, productService, $ionicHistory, $ionicPopup) {
    $scope.addToWishlist = function(ean) {

      productService.addProductToWishlist(ean).then(function(response) {
        if(response == "OK") {
          var alertPopup = $ionicPopup.alert({
            title: 'product added to wishlist',
            template: 'You can go to your wishlist to see all your marked products'
          });
        }
      });
    };
})

Edit4： 我在这里添加了一个Plunker：http://plnkr.co/edit/0woPfN 它不起作用，但你可以看到那里的代码（我删除了不必要的东西）

Answer 1

您的问题是您有WishlistCtrl的2声明。

进入app.js：

.state('app.wish', {
    url: "/wish",
    views: {
      'menuContent': {
        templateUrl: "wish.html",
        controller: 'WishlistCtrl' //here is the first declaration
      }
    }
  })

HTML中的第二个：

<ion-view hide-nav-bar="true" view-title="WISHLIST" ng-controller="WishlistCtrl">

删除任何一个，你会没事的。

Answer 2

最后，我得到了它的工作。首先在StateProvicer中我添加了一个解决方法：

  .state('app.wish', {
    url: "/wish",
    views: {
      'menuContent': {
        templateUrl: "templates/wish.html",
        controller: 'WishlistCtrl',
        resolve: {
          products: function(productService) {
            return productService.getWishlistProducts()
          }
        }
      }
    }
  })

在新产品添加到心愿单时更新模型：

  .controller("WishlistCtrl", function($scope, $state, productService, products) {

    //set wishlist products on controller load
    $scope.products = products;

    //updated wishlist when a new product gets added
    $rootScope.$on('updatedWishList', function() {
      console.log('List has been updated. ');
      productService.getWishlistProducts().then(function (products) {
        $scope.products = products;
      });
    });
  })

简单......当你知道如何：D

Angular.js $ scope和controller再次

2 个答案: