Question

编辑：图片+代码+回购

使用离子框架

enter image description here

上图显示了抽屉选项卡如何将视图两次叠加在一起。在/ drawer =＆gt;中会发生这种情况。 /抽屉/：的itemId /编辑＆＃39; =＆GT;单击抽屉选项卡

单击任何其他选项卡并返回抽屉时，它会恢复正常。

我的回购是

这是我的app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: false,
    templateUrl: "templates/tabs.html",
    controller: 'TabsCtrl'
  })

  // Each tab has its own nav history stack:

  .state('tab.requests', {
    url: '/requests',
    views: {
      'tab-requests': {
        templateUrl: 'templates/tab-requests.html',
        controller: 'RequestsCtrl'
      }
    }
  })
  .state('tab.drawer', {
      url: '/drawer',
      views: {
        'tab-drawer': {
          templateUrl: 'templates/tab-drawer.html',
          controller: 'DrawerCtrl'
        }
      }
    })
    .state('tab.item-detail-id', { //changed
      url: '/drawer/:itemId',
      views: {
        'tab-drawer': {
          templateUrl: 'templates/item-detail-id.html',
          controller: 'ItemDetailIdCtrl'
        }
      }
    })
  .state('tab.item-detail', { //changed
    url: '/drawer/:itemId/edit',
    views: {
      'tab-drawer': {
        templateUrl: 'templates/item-detail.html',
        controller: 'ItemDetailCtrl'
      }
    }
  })
  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/account');

});

这是我的控制器

angular.module('starter.controllers', [])

.controller('TabsCtrl', function($scope, User, Items, Requests) {

  $scope.userLogged = false;
  User.authenticate.then(function() {
    console.log(User.loggedIn.username)
    Items.sync(User.loggedIn.username);
    Requests.sync(User.loggedIn.username);
    $scope.userLogged = true;
    $scope.user = User.loggedIn;
  });

})

.controller('RequestsCtrl', function($scope, User, Sync, Requests) {

  Requests.retrieved.then(function(){
      $scope.requests = Requests.all;
      console.log("from the controller", $scope.requests);
  })

  //keeps sync with the Factory
  setInterval(function(){
    $scope.requests = Requests.all },
  1000);

})

.controller('ItemDetailIdCtrl', function(){

})

.controller('DrawerCtrl', function($scope, Sync, User, Items) {

  var sync;
  Items.retrieved.then(function(){
      $scope.drawer = Items.drawer;
      $scope.items = Items.all;
  })

  //keeps sync with the Factory
  setInterval(function(){
    $scope.items = Items.all },
  1000);

  $scope.newItem = {};

  $scope.addToDrawer = function(){
    console.log($scope.drawer)
    $scope.newItem.owner = $scope.drawer.owner
    //adds the item to Items collections
    var newItemRef = Sync("items").push($scope.newItem);
    itemId = newItemRef.key();
    //adds item to the drawer
    sync.child(itemId).set("true");
    console.log("Item" + $scope.newItem.description + "added with success");
    $scope.newItem = {};
  }

  $scope.isProvider = function(){
    if(User.loggedIn.provider)
      return false
    else
      return true
  };

  $scope.addRequest = function(itemKey){
    Sync("requests").push({
      item: itemKey,
      owner: User.loggedIn.username,
      date: Date.now()
    })
    console.log("Request added")
  }

})

.controller('ItemDetailCtrl', function($scope, $stateParams, Sync, User) {

  Sync("items").child($stateParams.itemId).on("value", function(snapshot){
    $scope.key = snapshot.key();
    $scope.item = snapshot.val();
    $scope.item_edit = angular.copy($scope.item)
    console.log($scope.item)
  })

  $scope.edit = function(){
    Sync("items").child($stateParams.itemId).update({
      name: $scope.item_edit.name,
      desc: $scope.item_edit.desc,
      price: $scope.item_edit.price
    })
  }

})

.controller('AccountCtrl', function($scope, $q, Sync, Auth, User, Items, Requests) {

  var defer = $q.defer();

  var sync = Sync("users");

  sync.on("value", function(snap){
    $scope.users = snap.val();
  }, function(errorObject){
    console.log("The read failed" + errorObject.code)
  })

  $scope.newUser = {};

  $scope.settings = {
    isFemale: true
  };

  $scope.addNewAuth = function(){
    Auth.createUser({
      email: $scope.newUser.email,
      password: $scope.newUser.password
    }, function(error, userData){
      if (error) {
        console.log("Error creating user" + error);
      } else {
        $scope.uid = userData.uid;
        console.log("Created user authentication for" + $scope.newUser.username)
        defer.resolve();
      }
    })
  }

  $scope.logIn = function(user){
    Auth.authWithPassword({
      email: user.email,
      password: user.password
    }, function(error, authData) {
      if(error) {
        console.log("Login failed", error)
      } else {
        console.log("User" + user.email + " has loggedIn", authData);
        user_path = "users/" + authData.uid
        $scope.authUser();
        $scope.loginUser = {};
      }
    })
  }

  $scope.register = function(){
    $scope.newUser.username = $scope.newUser.email.replace(/@.*/, '')
    $scope.addNewAuth();
    defer.promise.then(function(){
      sync.child($scope.uid).set($scope.newUser)
      Sync("drawers").push({owner: $scope.newUser.username})
      console.log("User" + $scope.newUser.username + "registered with success")
      $scope.logIn($scope.newUser)
      $scope.newUser = {};
    })
  };

  $scope.logOut = function(){Auth.unauth();$scope.userLogged=false};

  $scope.alwaysHide = function(){return true}

});

这是我的抽屉，您可以点击编辑图标进入项目详细信息

<ion-view view-title="Drawer" ng-if="userLogged" > 
 <ion-header-bar class="bar-stable">
   <h1 class="title">Drawer</h1>
   <div class="buttons">
     <button class="button button-icon ion-plus-circled" ng-click="upload()"></button>
   </div>
 </ion-header-bar>
 <ion-content>
   <ion-slide-box on-slide-changed="slideHasChanged($index)" >
     <ion-slide ng-repeat="(key, item) in items">
          <div class="slide-container">
              <div class="item item-avatar" >
               <img ng-src="{{item.pic}}">
               <h2>{{item.name}}</h2>
               <p>{{item.desc}}</p>
               <div class='price'>
                 $ {{item.price}}
               <!-- <div class='ion-cash'></div> -->
               </div>
             </div>

             <div class="item-image">
               <img class="item-pic" ng-src="{{item.pic}}">
             </div>
          </div>

             <!-- This needs Ng way to do ng class and logic to show and hide -->
             <div class="buttons">
               <a class="edit-button dark" ng-href="#/tab/drawer/{{key}}/edit" ng-show="isProvider()">
                 <i class="icon ion-edit"></i>
               </a>
               <a class="item item-icon-left" href="#" ng-click="addRequest(key)" ng-hide="isProvider()">
                 <i class="icon ion-code-download"></i>
               </a>
             </div>
     </ion-slide>
   </ion-slide-box>
 </ion-content>
</ion-view>

这里是项目详细信息编辑

<ion-view >
<ion-header-bar class="bar-stable">
 <h1 class="title">{{item.name}}</h1>
</ion-header-bar>
<ion-content>
 <div class="slide-container">
   <div class="item item-avatar" >
    <img ng-src="{{item.pic}}">
    <h2><input type="text" value="{{item.name}}" ng-model="item_edit.name"></h2>
    <p><input type="text" value="{{item.desc}}" ng-model="item_edit.desc"></p>
    <p id='dollar'>$</p>
    <div class='price-edit'>
      <label class="price-label item-input">
      <input class="price-input" type="text" value="{{item.price}}" ng-model="item_edit.price">
      </label>
    </div>
   </div>

   <div class="item-image">
    <img class="item-pic" ng-src="{{item.pic}}">
   </div>
  </div>

 <div class=" buttons">
   <div class="button-edit">
    <a class="edit-button dark" href='' ng-click="edit()">
      <i class="icon ion-edit"></i>
    </a>
   </div>
  </div>

</ion-content>
</ion-view>

感谢您的阅读：D如果您需要更多信息以解决我的问题，我很乐意提供，但我已将我的回购贴在上面

在选项卡之间切换时，Ionic Framework Angularjs渲染模板两次

0 个答案: