AngularJS中controller控制器继承的使用方法
前端之家收集整理的这篇文章主要介绍了
AngularJS中controller控制器继承的使用方法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前沿
最近在angularjs项目当中，看到 controller 好多都是重复性的代码，在 controller 当中有好多代码很相似 function（比如 controller 下的 CRUD 方法），重复性工作太多。后来想，可不可以提出一个service ，但仔细想想，这些CRUD 本来就是从 Service 中调用的，如果在提出Service，会造成 Service 比较混乱，职责不清晰 。 因为自己做过一些后端，借助后端的思想，是不是可以 controller 继承。
controllerservice实现继承经过一番查阅资料，发现AngularJS已经帮我们提供了controller继承。我们只需借助 controllerservice 。$controller service api
函数
// 如果传入一个 string，就会根据字符串去$controllerProvider 找
注册的 controller
//locals 是一个对象，注入来自局部的 controller,在这里我们认为 child controller
$controller(constructor,locals,[bindings])
嵌套控制器中属性是如何被继承的？
==属性值是字符串
myApp.controller("ChildCtrl",function($scope){
})
<div ng-controller="ParentCtrl">
以上，ParentCtrl中的name字段被ChildCtrl分享，但改变ChildCtrl中的name字段值却不会影响ParentCtrl中的name值，当改变ChildCtrl中的name值，ParentCtrl和ChildCtrl的嵌套关系被打破，再次改变ParentCtrl中的name字段值也不会影响ChildCtrl中的name值。
以上，给ParentCtrl中的变量赋值是字符串类型，如果给ParentCtrl中的字段赋值对象类型呢？
==属性值是对象
myApp.controller("ChildCtrl",function($scope){
})
<div ng-controller="ParentCtrl">
以上，ParentCtrl中vm对象的被ChildCtrl分享，当然也分享了对象中的name字段，当改变ChildCtrl中的vm.name值会影响到ParentCtrl，也就是不会把ParentCtrl和ChildCtrl之间的嵌套关系打破。
嵌套控制器中方法是如何被继承的？
使用ArrayCtrl中的add方法，添加没问题；而且ArrayCtrl中的add方法也可以被CollctionCtrl使用；
而且在子控制器中可以重写父控制器中的方法。
代码案例
1.创建一个 base.controller.js 文件
angular
.module('DemoApp')
.controller('BaseCtrl',BaseCtrl);
//手动注入一些服务
BaseCtrl.$inject = ['$scope','CRUDServices'];
/ @ngInject /
function BaseCtrl($scope,CRUDServices) {
var _this = this;
//当前 controller 提供一些方法
_this.bFormValid = formValid;
activate();
////////////////
//初始化时候<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>
function activate() {
getList();
}
// <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>数据列表
function getList() {
//把当前的结果赋值给 bList <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>上
_this.bList = CRUDServices.getList();
}
// 表单验证
function formValid(){
//do some thing
return false;
}
}
})();
代码很简单，我们在 BaseController中提供了一个简单的 formValid() 方法，还初始化调用了一个getList() 方法。
2.创建一个Service 。这个 service 来提供数据服务
angular
.module('DemoApp')
.service('ExtendServices',ExtendServices);
ExtendServices.$inject = [];
/ @ngInject /
function ExtendServices() {
return {
getList: getList //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a> list 列表
}
////////////////
function getList() {
return [{ id: 1,name: '张三' },{ id: 2,name: '李四' }]
}
}
})();
3.创建child.controller.js 文件 也就是我们最主要的一个文件
angular
.module('DemoApp')
.controller('ChildCtrl',ChildCtrl);
//手动注入一些服务
//ExtendServices 用来提供数据的 Servie
ChildCtrl.$inject = ['$scope','$controller','ExtendServices'];
/ @ngInject /
function ChildCtrl($scope,$controller,ExtendServices) {
var vm = this;
//<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>我们父 controller
var parentCtrl = $controller('BaseCtrl',{ $scope,$scope,CRUDServices:ExtendServices })
//通过 angular.extend 把父控制器上的 <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>和<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a> 绑定到 子的对象上
angular.extend(vm,parentCtrl);
activate();
////////////////
function activate() {
//<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>表单验证<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>
vm.bFormValid();
}
}
})();
这样，我们通过 $controller service 实现了 controller 的继承 ，也可以把 child controller 需要的注入的服务 传入到 base controller 当中 。（{ $scope,CRUDServices:ExtendServices }），我们child controlller 一行代码都没有写，就已经用了 获取 列表的 magic power 。如果我们需要调用表单验证,直接调用 vm.bFormValid() 就可以。
4.创建child.html 文件 ，我们直接 绑定就ok
结束语
这样下来以后我们可以提出一个 公共的 controller ，封装一些常用的方法，在 controller当中，只需要去写关于业务不同的 方法。 代码可维护性大大提高,代码量也会减下来。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/35398.html
