Angular.js$范围和控制器

Angular.js $scope and controller again

本文关键字：控制器 范围 js Angular      更新时间：2023-09-26

我知道关于angular$scope有很多问题，几个小时后我仍然不知道出了什么问题。我将Angular.js与Ionic一起使用，但问题应该与角度有关。

在我的应用程序中，我需要一个"添加到愿望列表"功能。在productDetail视图中，当有人点击"添加到愿望列表"时，我会将此产品与服务和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"
      }
    }
  })

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

$scope.updateWishList = function () ...

创建另一个$scope。。。

第3版：

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'
          });
        }
      });
    };
})

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

您的问题是有两个WishlistCtrl声明。

一旦进入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">

去掉任何一个，你都会没事的。

最后，我让它工作起来了。首先在StateProvider中，我添加了一个解析方法：

  .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

相关文章：