Question

上下文：

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

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

在ParentTempl中有一个视图有两种状态：添加和编辑。

我想调用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注入您的工厂/服务，这样您就可以根据您所处的状态处理事情：

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中实现基于状态的动态函数？

上下文：

当前代码：

问题：

2 个答案: