Question

我在使用离子（1.6.5）和角度js以及为iOS和Android构建时在Cordova（5.3.3）中创建的应用程序存在一些问题。

我有一个菜单项，当我点击时应该加载下一个状态与其他菜单项。然而，似乎它在没有动画的情况下加载下一个状态，然后再次使用动画加载状态，从而产生“生涩”效果。最好在我上传的视频中显示：https://www.youtube.com/watch?v=YCEQeqFyNl4&feature=youtu.be

我想知道是否有人知道这里可能出现什么问题以及我应该从哪里开始寻找，或者是否存在已知的错误？

任何帮助将不胜感激！

// the controller
.controller('ProgramCtrl', ['$scope', 'FacProgram',
  function($scope, FacProgram) {


    $scope.refresh = function() {
      FacProgram.refresh()
        .finally(function() {
          $scope.$broadcast('scroll.refreshComplete');
        });
    };

    $scope.temp_articles = function() {
      return FacProgram.all();
    };

  }
])

.controller('ProgramDetailCtrl', ['$scope', '$stateParams', 'FacProgram',
  function($scope, $stateParams, FacProgram) {
    $scope.art = FacProgram.get($stateParams.programId);

  }
])


// The factory in a different js file:

.factory('FacProgram', ['$http', '$q', 'FacJson',
function($http, $q, FacJson) {

  var temp_articles = [];


  function findHeader(src, headTag, index) {
    var head = $(src).find(headTag).get(0);
    temp_articles[index].headlinethumb = head.textContent;
    temp_articles[index].headline = head.textContent;
  }


  function refresh() {
    var q = $q.defer();

    ... // A fucntion that get's URL's from .json file
    ////////////////////////////////////////////////////////////
    angular.forEach(urls, function(URL, index) {
      //add the articles to the dictionary
      temp_articles.push({
        inx: index,
        img: img_logos[index]
      });
      $http.get(URL)
        .then(function(sc) {
            // The will parse the html looking for thumbnail text, main body text etc
            var src = sc.data.substring(sc.data.indexOf('<html>'));

            ... // code that parses website for content etc
            ////////////////////////////////////////////////////////
            q.resolve();
          },
          function() {
            q.reject();
          });
    });
  });

return q.promise
}


return {
all: function() {
  return temp_articles;
},
get: function(programId) {
  return temp_articles[programId];
},
refresh: function() {
  console.log('DPG programs refresh triggered');
  temp_articles = []; // a catch to prevent duplicates and to allow other templates to use without
  //contamination
  return refresh()
}
}
}]);

<!-- the start state for progams of the DPG -->
<ion-view>
  <ion-content>
    <div class="list">
      <a class="item item-thumbnail-left item-icon-right item-text-wrap" ng-repeat="art in temp_articles()" href="#/program/{{$index}}">
        <img ng-src="{{art.img}}">

        <h2 class="padding-top" style="font-weight: 300;">{{art.headlinethumb}}</h2>
        <i class="icon ion-chevron-right" style="font-size: 18px"></i>
      </a>
    </div>

  </ion-content>
</ion-view>



<!-- the datailed view of the application -->
<ion-view>
  <ion-content>



    <div style="text-align: left; padding-top: 30px; padding-left: 20px; padding-right: 20px">
      <h2 style="font-weight: 500; font-size: 17px">{{art.headline}}</h2>
    </div>
    <!--<p style="padding-left: 10px; font-size: 13px; font-weight: 300">Datum</p>-->

    <div style="text-align: center">
      <img style="max-height: 300px; max-width: 300px; width: auto;" ng-src="{{art.img}}">

    </div>
    <div class="padding" style="font-weight: 300">
      <div ng-bind-html="art.text | hrefToJS"></div>
    </div>

  </ion-content>
</ion-view>

Answer 1

如果你把你的控制器放在app.js中尝试从那里删除它并且只在控制器中应用它，反之亦然。

你在app.js中的状态应如下所示：

 .state('state-name', {
    url: '/state-name',
    templateUrl: "templates/walkthrough/state-name.html"
    //Notice no controller here
  })

cordova离子应用似乎加载控制器两次

1 个答案: