好资源导航 »
文章资讯 »
AngularJS中controller控制器继承的使用方法
AngularJS中controller控制器继承的使用方法
前沿
最近在angularjs项目当中，看到controller好多都是重复性的代码，在controller当中有好多代码很相似function（比如controller下的CRUD方法），重复性工作太多。后来想，可不可以提出一个service，但仔细想想，这些CRUD本来就是从Service中调用的，如果在提出Service，会造成Service比较混乱，职责不清晰。因为自己做过一些后端，借助后端的思想，是不是可以controller继承。
controllerservice实现继承经过一番查阅资料，发现AngularJS已经帮我们提供了controller继承。我们只需借助controllerservice。$controllerserviceapi
//参数的解释
//constructor可以是function也可以是string
//如果传入一个function,就会当成controller的构造函数
//如果传入一个string，就会根据字符串去$controllerProvider找注册的controller
//locals是一个对象，注入来自局部的controller,在这里我们认为childcontroller
$controller(constructor,locals,[bindings])
嵌套控制器中属性是如何被继承的？
==属性值是字符串
myApp.controller("ParentCtrl",function($scope){
$scope.name="darren";
})
myApp.controller("ChildCtrl",function($scope){
})
- childcontrollername:{{name}}
- parentcontrollername:{{$parent.name}}
以上，ParentCtrl中的name字段被ChildCtrl分享，但改变ChildCtrl中的name字段值却不会影响ParentCtrl中的name值，当改变ChildCtrl中的name值，ParentCtrl和ChildCtrl的嵌套关系被打破，再次改变ParentCtrl中的name字段值也不会影响ChildCtrl中的name值。
以上，给ParentCtrl中的变量赋值是字符串类型，如果给ParentCtrl中的字段赋值对象类型呢？
==属性值是对象
myApp.controller("ParentCtrl",function($scope){
$scope.vm={
name:"John"
};
})
myApp.controller("ChildCtrl",function($scope){
})
- childcontrollername:{{vm.name}}
- parentcontrollername:{{$parent.vm.name}}
以上，ParentCtrl中vm对象的被ChildCtrl分享，当然也分享了对象中的name字段，当改变ChildCtrl中的vm.name值会影响到ParentCtrl，也就是不会把ParentCtrl和ChildCtrl之间的嵌套关系打破。
嵌套控制器中方法是如何被继承的？
myApp.controller("ArrayCtrl",function($scope){
$scope.myArray=["John","Andrew"];
$scope.add=function(name){
$scope.myArray.push(name);
}
})
myApp.controller("CollectionCtrl",function($scope){
})
{{myArray}}
AddNewItem
AddNewItem
使用ArrayCtrl中的add方法，添加没问题；而且ArrayCtrl中的add方法也可以被CollctionCtrl使用；
而且在子控制器中可以重写父控制器中的方法。
myApp.controller("CollectionCtrl",function($scope){
//插入到某个位置
$scope.add=function(name,index){
$scope.myArray.splice(index,0,name);
}
})
{{myArray}}
AddNewItem
AddNewItem
代码案例
1.创建一个base.controller.js文件
(function(){
'usestrict';
angular
.module('DemoApp')
.controller('BaseCtrl',BaseCtrl);
//手动注入一些服务
BaseCtrl.$inject=['$scope','CRUDServices'];
/*@ngInject*/
functionBaseCtrl($scope,CRUDServices){
var_this=this;
//当前controller提供一些方法
_this.bFormValid=formValid;
activate();
////////////////
//初始化时候调用
functionactivate(){
getList();
}
//获取数据列表
functiongetList(){
//把当前的结果赋值给bList属性上
_this.bList=CRUDServices.getList();
}
//表单验证
functionformValid(){
//dosomething
returnfalse;
}
}
})();
代码很简单，我们在BaseController中提供了一个简单的formValid()方法，还初始化调用了一个getList()方法。
2.创建一个Service。这个service来提供数据服务
(function(){
'usestrict';
angular
.module('DemoApp')
.service('ExtendServices',ExtendServices);
ExtendServices.$inject=[];
/*@ngInject*/
functionExtendServices(){
return{
getList:getList//获取list列表
}
////////////////
functiongetList(){
return[{id:1,name:'张三'},{id:2,name:'李四'}]
}
}
})();
3.创建child.controller.js文件也就是我们最主要的一个文件
(function(){
'usestrict';
angular
.module('DemoApp')
.controller('ChildCtrl',ChildCtrl);
//手动注入一些服务
//ExtendServices用来提供数据的Servie
ChildCtrl.$inject=['$scope','$controller','ExtendServices'];
/*@ngInject*/
functionChildCtrl($scope,$controller,ExtendServices){
varvm=this;
//调用我们父controller
varparentCtrl=$controller('BaseCtrl',{$scope,$scope,CRUDServices:ExtendServices})
//通过angular.extend把父控制器上的方法和属性绑定到子的对象上
angular.extend(vm,parentCtrl);
activate();
////////////////
functionactivate(){
//调用表单验证方法
vm.bFormValid();
}
}
})();
这样，我们通过$controllerservice实现了controller的继承，也可以把childcontroller需要的注入的服务传入到basecontroller当中。（{$scope,$scope,CRUDServices:ExtendServices}），我们childcontrolller一行代码都没有写，就已经用了获取列表的magicpower。如果我们需要调用表单验证,直接调用vm.bFormValid()就可以。
4.创建child.html文件，我们直接绑定就ok
结束语
这样下来以后我们可以提出一个公共的controller，封装一些常用的方法，在controller当中，只需要去写关于业务不同的方法。代码可维护性大大提高,代码量也会减下来。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
