每当打开/显示视图时运行控制器功能

时间:2014-11-21 09:41:36

标签: angularjs ionic-framework

我正在构建一个带有角度+离子的应用程序,它使用底部带有三个离子标签的经典三按钮菜单。当用户单击选项卡时,该模板将通过ui-router打开。

我有这样的州:

$stateProvider
  .state('other', {
    url: "/other",
    abstract: true,
    templateUrl: "templates/other/other.html"
})

在模板中我做了类似的事情:

<ion-nav-view name="other" ng-init="doSomething()"></ion-nav-view>

我知道我可以在我的控制器中编写doSomething()函数,然后在那里手动调用它。这给了我同样的问题。我无法理解如何在有人打开该视图时多次调用doSomething()函数。

现在,doSomething()函数被调用得很好,但只是第一次用户打开视图/选项卡。我想在用户打开该视图或标签时调用一个函数(更新地理位置)。

实施该方法的正确方法是什么?

感谢您的帮助!

9 个答案:

答案 0 :(得分:86)

默认情况下,您的控制器是缓存,这就是您的控制器只触发一次的原因。要关闭某个控制器的缓存,您必须修改.config(..).state并将cache选项设置为false。例如:

  .state('myApp', {
    cache: false,
    url: "/form",
    views: {
      'menuContent': {
        templateUrl: "templates/form.html",
        controller: 'formCtrl'
      }
    }
  })

如需进一步阅读,请访问http://ionicframework.com/docs/api/directive/ionNavView/

答案 1 :(得分:49)

跟进AlexMart的答案和链接,这样的方法有效:

.controller('MyCtrl', function($scope) {
  $scope.$on('$ionicView.enter', function() {
     // Code you want executed every time view is opened
     console.log('Opened!')
  })
})

答案 2 :(得分:45)

如果您已为视图指定了某个控制器,则每次加载视图时都会调用控制器。在这种情况下,您可以在调用控制器后立即执行一些代码,例如:

<ion-nav-view ng-controller="indexController" name="other" ng-init="doSomething()"></ion-nav-view>

在你的控制器中:

app.controller('indexController', function($scope) {
    /*
        Write some code directly over here without any function,
        and it will be executed every time your view loads.
        Something like this:
    */
    $scope.xyz = 1;
});

编辑:您可能会尝试跟踪状态更改,然后在更改路线并访问某个路线时执行一些代码,例如:

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

您可以在此处找到更多详细信息:State Change Events

答案 3 :(得分:12)

我遇到了同样的问题,在这里我将这种行为的原因留给其他所有同样问题的人。

  

查看LifeCycle

     

为了提高性能,我们提高了Ionic缓存视图元素和范围数据的能力。一旦控制器初始化,它可能会持续整个应用程序的生命周期;它只是隐藏并从观察周期中移除。由于我们没有重建范围,因此我们添加了在再次进入观察周期时应该收听的事件。

要查看完整描述和$ ionicView事件,请转到: http://ionicframework.com/blog/navigating-the-changes/

答案 4 :(得分:8)

为什么不通过 cache-view =&#34; false&#34; 来禁用视图缓存?

在您的视图中,将其添加到离线导航视图中,如下所示:

<ion-nav-view name="other" cache-view="false"></ion-nav-view>

或者在你的州提供者:

$stateProvider.state('other', {
   cache: false,
   url : '/other',
   templateUrl : 'templates/other/other.html'
})

任何一个都会让您的控制器始终被调用。

答案 5 :(得分:5)

例如@Michael Trouw,

控制器里面的

放了这段代码。 这将在每次进入或激活状态时运行,您不必担心禁用缓存,这是一种更好的方法。

.controller('exampleCtrl',function($scope){
$scope.$on('$ionicView.enter', function(){
        // Any thing you can think of
        alert("This function just ran away");   
    });
})

您可以拥有更多灵活性示例,例如$ ionicView.beforeEnter - &gt;在显示视图之前运行。还有更多内容。

答案 6 :(得分:2)

考虑到Ionic能够缓存上面提到的视图元素和范围数据,如果你想在每次加载视图时运行控制器,这可能是另一种方法。您可以通过执行以下操作全局禁用离子使用的缓存机制:

$ionicConfigProvider.views.maxCache(0);

另外,我让它为我工作的方式是

$scope.$on("$ionicView.afterLeave", function () {
     $ionicHistory.clearCache();
}); 

这是为了在每次再次输入时离开视图以重新运行控制器之前清除缓存。

答案 7 :(得分:1)

这可能就是你要找的东西:

Ionic默认缓存您的视图,因此默认情况下控制您的控制器(最多10个) http://ionicframework.com/docs/api/directive/ionView/

有些事件你可以挂钩让你的控制器根据这些离子事件做某些事情。看这里举个例子: http://ionicframework.com/blog/navigating-the-changes/

答案 8 :(得分:0)

我遇到类似离子的问题,一旦我选择了相机标签,我就试图加载原生相机。我通过将控制器设置为摄像机选项卡的离子视图组件(在tabs.html中),然后调用加载我的摄像机的$ scope方法(addImage)解决了这个问题。

在www / templates / tabs.html

  <ion-tab title="Camera" icon-off="ion-camera" icon-on="ion-camera" href="#/tab/chats" ng-controller="AddMediaCtrl" ng-click="addImage()">
    <ion-nav-view  name="tab-chats"></ion-nav-view>
  </ion-tab>

每次用户单击“相机”选项卡时,AddMediaCtrl中定义的addImage方法都会加载本机相机。我做必须更改角缓存中的任何内容才能使其正常工作。我希望这会有所帮助。