Question

我正在使用Ionic开发移动应用程序。理想情况下，我可以通过像angular.element().addClass和angular.element().removeClass这样的DOM操作来切换和控制不同HTML部分的可见性。

以下是演示。当我们启动它时，应用会呈现第一部分#section-1。三秒钟后，#section-1被隐藏，最后一部分#section-2显示没有问题。但是当我点击refresh中的#section-2重新加载视图时，#section-1无法按预期显示，我们跳到上一部分。似乎active类无法再添加到#section-1的元素中。

我已经cache-view="false"禁用了视图缓存。我不知道我哪里错了，或者它是AngularJS / Ionic中的一个错误。

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $provide) {
  $stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'templates/main.html',
      controller: 'MainCtrl'
    });

  $urlRouterProvider.otherwise('/main');
})

.controller('MainCtrl', function($scope, $http, $state, $timeout) {
  var _clearScene = function() {
    angular.element(document.querySelector('.active')).removeClass('active');
  };

  var _enterScene = function(scene) {
    angular.element(document.querySelector('#section-' + scene)).addClass('active');
  };

  var _renderScene = function(scene) {
    _clearScene();
    _enterScene(scene);
  };

  $scope.refresh = function() {
    $state.go($state.current, {}, {
      reload: true
    });
  };

  _renderScene(1);

  $timeout(function() {
    _renderScene(2);
  }, 3000);
});

section {
  display: none;
}
section.active {
  display: block;
}

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/1.3.0/css/ionic.css">
  <script type="text/javascript" src="https://code.ionicframework.com/1.3.0/js/ionic.bundle.js"></script>
  <title></title>
</head>

<body ng-app="ionicApp">
  <ion-nav-view></ion-nav-view>

  <script id="templates/main.html" type="text/ng-template">
    <ion-view id="main" cache-view="false" can-swipe-back="false">
      <ion-content padding="true" scroll="true">
        <section id="section-1">
          Loading...
        </section>
        <section id="section-2">
          Main content <a ng-click="refresh()">refresh</a>
        </section>
    </ion-view>
  </script>
</body>

</html>

Answer 1

后来我阅读了一些关于Angular Controller的文档，包括此通知：

请勿使用控制器：

操纵DOM - 控制器应仅包含业务逻辑。将任何表示逻辑放入控制器会显着影响其可测试性。 Angular对大多数情况和指令进行数据绑定以封装手动DOM操作。

所以我认为在完成控制器内的手动DOM操作之后，角度会以某种方式覆盖DOM（在摘要周期结束时）。最后，我使用一些变量更改了控制器中的业务逻辑，并使用ng-class来控制节的可见性。现在它有效。

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $provide) {
  $stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'templates/main.html',
      controller: 'MainCtrl'
    });

  $urlRouterProvider.otherwise('/main');
})

.controller('MainCtrl', function($scope, $http, $state, $timeout) {
  $scope.view = {
    scenes: []
  };
  $scope.view.scenes[1] = {
    active: false
  };
  $scope.view.scenes[2] = {
    active: false
  };
  
  var _clearScene = function() {
    $scope.view.scenes[1].active = false;
    $scope.view.scenes[2].active = false;
  };

  var _enterScene = function(scene) {
    $scope.view.scenes[scene].active = true;
  };

  var _renderScene = function(scene) {
    _clearScene();
    _enterScene(scene);
  };

  $scope.refresh = function() {
    $state.go($state.current, {}, {
      reload: true
    });
  };

  _renderScene(1);

  $timeout(function() {
    _renderScene(2);
  }, 3000);
});

section {
  display: none;
}
section.active {
  display: block;
}

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/1.3.0/css/ionic.css">
  <script type="text/javascript" src="https://code.ionicframework.com/1.3.0/js/ionic.bundle.js"></script>
  <title></title>
</head>

<body ng-app="ionicApp">
  <ion-nav-view></ion-nav-view>

  <script id="templates/main.html" type="text/ng-template">
    <ion-view id="main" cache-view="false" can-swipe-back="false">
      <ion-content padding="true" scroll="true">
        <section id="section-1" ng-class="{active:view.scenes[1].active}">
          Loading...
        </section>
        <section id="section-2" ng-class="{active:view.scenes[2].active}">
          Main content <a ng-click="refresh()">refresh</a>
        </section>
    </ion-view>
  </script>
</body>

</html>

Ionic中意外的angular.element DOM操作行为

1 个答案: