Question

我是AngularJS和ui-router的新用户，我正试图改变管理范围的方法。我期望当状态改变变为非活动状态时，活动控制器的范围将被销毁，但是，似乎并非如此。

我已经修改了UI-Router网站上的示例以说明情况（请参阅下面的plunker）。每次触发state route1.list / route2.list时，它们都会在$ rootScope上发出一个事件。收到事件后，将在控制台上打印调试语句。

通过在两种状态之间切换几次，可以观察到之前初始化的所有控制器都响应了该事件。所以看来它们创建的范围从未被破坏过。这种行为有望吗？如果是这样，我该怎么办才能让只有主动控制器响应事件？

Plunker

控制台上打印的调试消息：

代码：

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")

这是route1

$stateProvider
  .state('route1', {
      url: "/route1",
      templateUrl: "route1.html"
  })
    .state('route1.list', {
        url: "/list",
        templateUrl: "route1.list.html",
        controller: function($rootScope, $scope){
          $rootScope.$emit("eventCT1");
          $rootScope.$on("eventCT2", fn);
          function fn () {
            console.log("Controller 1 receives an event emitted by Controller 2");
          }
          $scope.items = ["A", "List", "Of", "Items"];
        }
    })

这里是路线2

  .state('route2', {
      url: "/route2",
      templateUrl: "route2.html"
  })
    .state('route2.list', {
        url: "/list",
        templateUrl: "route2.list.html",
        controller: function($rootScope, $scope){
          $rootScope.$emit("eventCT2");
          $rootScope.$on("eventCT1", fn);
          function fn () {
            console.log("Controller 2 receives an event emitted by Controller 1");
          }
          $scope.things = ["A", "Set", "Of", "Things"];
        }
    })
 ...

Answer 1

如果我们想用

做点什么

1）控制器内的 $rootScope （生命周期非常有限），

2）当控制器（实际上它的$scope 被销毁时，我们必须销毁它

所以，这就是如何挂钩和取消挂钩的方式

// get remove function
var removeMe = $rootScope.$on("eventCT2", ...);

// call that function
$scope.$on("$destroy", removeMe)

但是，在上面的情况下，我们甚至不应该尝试

1）为一个州创建一些控制器动作......

2）并期望它将在来自不同州的另一个控制器中调用

这些永远不会共存

Answer 2

如果您正在使用Ionic和Angular，您可以使用life cycle events，如下所示：

$scope.$on("$ionicView.beforeEnter", function(){
   //Do something every time this controller is the active scope.
})

您也可以使用上述链接中提供的其他活动。最小化$emit的使用可能是最佳做法，这将导致更可预测的代码和更少的状态突变。

UI-Router - 状态变化时范围没有被破坏？

2 个答案: