如何在Angular和UI-Router中实现一个基于状态的动态功能？

Question

上下文：

我正在使用 Angular 和 ui-router...

我有一个带有模板“ParentTempl”的父控制器“ParentCtrl”。

在 ParentTempl 中有 2 个状态的视图：add 和 edit。

我想从 ParentCtrl“abstractUpdate”调用一个函数，该函数根据活动状态更改其行为。

当前代码：

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('add', {
        template: "...", 
        abstractUpdate = function(object){
            // do add things
        }
    })
    .state('edit', {
        template: "...", 
        abstractUpdate = function(object){
            // do edit things
        }
    });
}

app.controller('ParentCtrl', function ($scope, $state) {
    $scope.click = function(obj){
        $state.current.abstractUpdate(obj);
    }
}

问题：

当前版本可用，但您认为它是最佳解决方案？有什么建议吗？

Answer 1

如果有两个独立的函数，每个函数执行各自的任务，那就更清楚了。这是一个更好的编程习惯，imo。

您可以为每个子视图创建一个控制器，并且仍将 ParentCtrl 作为每个视图的父视图。每个子控制器都可以有自己的点击处理程序，它会调用父级上的 'edit' 或 'new' 方法（除非将该代码全部或部分放在每个子控制器上更有意义）。

Answer 2

通常你会使用工厂或服务来做这样的事情。这样你就不会用应用程序逻辑阻塞你的路由。您可以将 $state 注入到您的 factory/service 中，这样您就可以根据您所处的状态处理事情：

angular.module('myApp').factory('MyService', [
    '$state',
    function ($state) {
      return {
        myMethod: function (obj) {
          if (this.hasOwnProperty($state.current.name)) {
            this[$state.current.name](obj);
          }
        },
        add: function (obj) {
          // do stuff
          return obj;
        },
        edit: function (obj) {
          // do stuff
          return obj;
        }
      }
    }
]);

现在您可以从任何您想要的控制器使用您的服务，只需注入它：

 angular.module('myApp').controller('myController', [
     '$scope',
     'MyService',
     function ($scope, MyService) {
         $scope.obj = {};
         $scope.obj = MyService.myMethod(obj);
     }
 ]);

如何在Angular和UI-Router中实现一个基于状态的动态功能？

How to implement a dynamic function in Angular and UI-Router based on states?

dynamic-function

angularjs

angular-ui-router

上下文：

当前代码：

问题：