扩展AngularJS控制器的推荐方式是什么?

9 浏览
0 Comments

扩展AngularJS控制器的推荐方式是什么?

我有三个非常相似的控制器。我想要一个控制器,这三个控制器都可以继承并共享其功能。

0
0 Comments

在AngularJS中扩展控制器的推荐方法是使用服务(Services)。另外,还可以利用Angular的Scope继承特性在控制器之间共享代码。通过在父控制器中定义函数和变量,在子控制器中可以直接使用。另外,还有一种方法是通过$scope.$parent.fx()来调用父控制器中定义的函数。

下面是一个示例代码:


  
function ParentCtrl($scope) { $scope.fx = function() { alert("Hello World"); } } function FirstChildCtrl($scope) { // 在这里可以使用$scope.fx() } function SecondChildCtrl($scope) { // 在这里可以使用$scope.fx() }

以上是使用$scope继承的方法,通过在父控制器中定义的函数和变量,可以在子控制器中直接使用。这种方法比其他方法更加优雅和易于理解。

另外,还有一种方法是使用服务(Services)。通过将共享的代码封装为服务,可以在多个控制器中共享和复用。这种方法可以更好地组织和管理代码,提高代码的可维护性和重用性。

总结起来,推荐的方法是使用服务(Services)来扩展AngularJS控制器。另外,可以利用Angular的Scope继承特性在控制器之间共享代码。使用这些方法可以更好地组织和管理代码,提高代码的可维护性和重用性。

0
0 Comments

扩展AngularJS控制器的推荐方法是使用标准的JavaScript继承模式。下面介绍了几种实现方式。

第一种方式是使用$injector,在这个示例中,Parent作为基础控制器,Child继承了Parent的属性和方法。Child通过调用$injector.invoke方法来实现对Parent的继承。具体代码如下:

function Parent($scope) {
  $scope.name = 'Human';
  $scope.clickParent = function() {
    $scope.name = 'Clicked from base controller';
  }    
}
function Child($scope, $injector) {
  $injector.invoke(Parent, this, {$scope: $scope});
  $scope.name = 'Human Child';
  $scope.clickChild = function(){
    $scope.clickParent();
  }       
}
Child.prototype = Object.create(Parent.prototype);

第二种方式是使用经典的继承模式,在使用controllerAs语法的情况下,更容易实现继承。具体代码如下:

function BaseCtrl() {
  this.name = 'foobar';
}
BaseCtrl.prototype.parentMethod = function () {
  //body
};
function ChildCtrl() {
  BaseCtrl.call(this);
  this.name = 'baz';
}
ChildCtrl.prototype = Object.create(BaseCtrl.prototype);
ChildCtrl.prototype.childMethod = function () {
  this.parentMethod();
  //body
};
app.controller('BaseCtrl', BaseCtrl);
app.controller('ChildCtrl', ChildCtrl);

第三种方式是创建一个抽象的构造函数作为基础控制器。具体代码如下:

function BaseController() {
  this.click = function () {
    //some actions here
  };
}
module.controller('ChildCtrl', ['$scope', function ($scope) {
  BaseController.call($scope);
  $scope.anotherClick = function () {
    //other actions
  };
}]);

以上是扩展AngularJS控制器的几种推荐方法。通过使用这些方法,我们可以方便地实现控制器的继承和扩展。详细内容可以参考这篇博文

0
0 Comments

AngularJS中扩展控制器的推荐方法是通过使用$controller服务和angular.extend函数来实现。可以将一个控制器扩展为多个控制器的混合。当父控制器创建时,其中包含的逻辑也会被执行。使用$controller()方法可以了解更多信息,但只需要传递$scope参数即可,其他值将会被正常注入。Angular的依赖注入机制会自动处理您的关注点,您只需要注入$scope即可,尽管如果需要,您可以重写其他注入的值。下面是一个示例,展示了如何扩展控制器:

(function(angular) {
  var module = angular.module('stackoverflow.example',[]);
  module.controller('simpleController', function($scope, $document) {
    this.getOrigin = function() {
      return $document[0].location.origin;
    };
  });
  module.controller('complexController', function($scope, $controller) {
    angular.extend(this, $controller('simpleController', {$scope: $scope}));
  });
})(angular);


Origin from Controller: {{C.getOrigin()}}

在这个示例中,当由'complexController'创建'simpleController'时,并没有将$document注入到'simpleController'中,但是$document会自动被注入。这个方法可以简化控制器的复杂性,通过让它们继承共享的功能来实现。可以通过继承基本控制器的属性来访问它们。但如果基本控制器还定义了一些属性,例如this.myVar=5,只有在使用angular.extend时才能在扩展控制器中访问this.myVar。如果扩展的控制器有很多参数,您将不得不在扩展控制器方法的签名中重复所有参数,这对我来说有点复杂。这种方法可以在Ionic应用程序中使用,通过它可以添加共享行为,如隐藏/显示常见的元素或使用$Ionicloading等插件。在使用这种扩展控制器的方法时,需要注意延迟初始化的问题。例如,如果有一个promise,在稍后设置某个属性,该属性将在扩展之后被设置到simpleController中(因为初始化会被执行)。因此,更容易的方法是先创建simpleController实例,然后将其扩展为新属性,最后返回它。另外需要注意的是,如果扩展控制器中有多个函数需要继承,比如handleSubmitClick调用handleLogin,而handleLogin又有loginSuccess和loginFail,那么在扩展控制器中需要重载handleSubmitClick、handleLogin和loginSuccess函数,以确保使用正确的loginSuccess函数。这种扩展控制器的方法并不是一种方便的方式。

0