AngularJS中controller控制器继承的使用方法
前沿
最近在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 crud 方法),重复性工作太多。后来想,可不可以提出一个service ,但仔细想想,这些crud 本来就是从 service 中调用的,如果在提出service,会造成 service 比较混乱,职责不清晰 。 因为自己做过一些后端,借助后端的思想,是不是可以 controller 继承。
controllerservice实现继承经过一番查阅资料,发现angularjs已经帮我们提供了controller继承。我们只需借助 controllerservice 。$controller service api
// 参数的解释 // constructor 可以是 function 也可以是 string // 如果传入一个 function, 就会当成 controller 的构造函数 // 如果传入一个 string,就会根据字符串去$controllerprovider 找 注册的 controller //locals 是一个对象,注入来自局部的 controller ,在这里我们认为 child controller $controller(constructor, locals, [bindings])
嵌套控制器中属性是如何被继承的?
==属性值是字符串
myapp.controller("parentctrl", function($scope){ $scope.name = "darren"; }) myapp.controller("childctrl", function($scope){ }) <div ng-controller="parentctrl"> <label>父控制器中的name变量值</label> <input ng-model="name" /> <div ng-controller="childctrl"> <label>子控制器中的name变量值</label> <input ng-model="name" /> <ul> <li>child controller name: {{name}}</li> <li>parent controller name: {{$parent.name}}</li> </ul> </div> </div>
以上,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){ }) <div ng-controller="parentctrl"> <label>父控制器中的vm.name变量值</label> <input ng-model="vm.name" /> <div ng-controller="childctrl"> <label>子控制器中的vm.name变量值</label> <input ng-model="vm.name" /> <ul> <li>child controller name: {{vm.name}}</li> <li>parent controller name: {{$parent.vm.name}}</li> </ul> </div> </div>
以上,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){ }) <div ng-controller="arrayctrl"> <label>my array:</label><span>{{myarray}}</span> <label>parent controller:</label> <input ng-model="parentname" /> <button ng-click="add(parentname)">add new item</button> <div ng-controller="collectionctrl"> <label>child controller:</label> <input ng-model="childname" /> <input type="number" ng-model="index" /> <button ng-click="add(childname)">add new item</button> </div> </div>
使用arrayctrl中的add方法,添加没问题;而且arrayctrl中的add方法也可以被collctionctrl使用;
而且在子控制器中可以重写父控制器中的方法。
myapp.controller("collectionctrl", function($scope){ //插入到某个位置 $scope.add = function(name, index){ $scope.myarray.splice(index,0, name); } }) <div ng-controller="arrayctrl"> <label>my array:</label><span>{{myarray}}</span> <label>parent controller:</label> <input ng-model="parentname" /> <button ng-click="add(parentname)">add new item</button> <div ng-controller="collectionctrl"> <label>child controller:</label> <input ng-model="childname" /> <input type="number" ng-model="index" /> <button ng-click="add(childname, index)">add new item</button> </div> </div>
代码案例
1.创建一个 base.controller.js 文件
(function() { 'use strict'; angular .module('demoapp') .controller('basectrl', basectrl); //手动注入一些服务 basectrl.$inject = ['$scope','crudservices']; /* @nginject */ function basectrl($scope,crudservices) { var _this = this; //当前 controller 提供一些方法 _this.bformvalid = formvalid; activate(); //////////////// //初始化时候调用 function activate() { getlist(); } // 获取数据列表 function getlist() { //把当前的结果赋值给 blist 属性上 _this.blist = crudservices.getlist(); } // 表单验证 function formvalid(){ //do some thing return false; } } })();
代码很简单,我们在 basecontroller中提供了一个简单的 formvalid() 方法,还初始化调用了一个getlist() 方法。
2.创建一个service 。这个 service 来提供数据服务
(function() { 'use strict'; angular .module('demoapp') .service('extendservices', extendservices); extendservices.$inject = []; /* @nginject */ function extendservices() { return { getlist: getlist //获取 list 列表 } //////////////// function getlist() { return [{ id: 1, name: '张三' }, { id: 2, name: '李四' }] } } })();
3.创建child.controller.js 文件 也就是我们最主要的一个文件
(function() { 'use strict'; angular .module('demoapp') .controller('childctrl', childctrl); //手动注入一些服务 //extendservices 用来提供数据的 servie childctrl.$inject = ['$scope', '$controller','extendservices']; /* @nginject */ function childctrl($scope, $controller,extendservices) { var vm = this; //调用我们父 controller var parentctrl = $controller('basectrl', { $scope, $scope,crudservices:extendservices }) //通过 angular.extend 把父控制器上的 方法和属性 绑定到 子的对象上 angular.extend(vm, parentctrl); activate(); //////////////// function activate() { //调用表单验证方法 vm.bformvalid(); } } })();
这样,我们通过 $controller service 实现了 controller 的继承 ,也可以把 child controller 需要的注入的服务 传入到 base controller 当中 。({ $scope, $scope,crudservices:extendservices }),我们child controlller 一行代码都没有写,就已经用了 获取 列表的 magic power 。如果我们需要调用表单验证,直接调用 vm.bformvalid() 就可以。
4.创建child.html 文件 ,我们直接 绑定就ok
<div> <!-- 直接绑定 vm.blist 就会看到输出结果--> <div ng-repeat="item in vm.blist">{{item}}</div> </div>
结束语
这样下来以后我们可以提出一个 公共的 controller ,封装一些常用的方法,在 controller当中,只需要去写关于业务不同的 方法。 代码可维护性大大提高,代码量也会减下来。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 抖音小店怎么开通需要什么条件(抖音小店和橱窗的区别)
下一篇: 爆笑儿童,让老爸带孩子,彰显想象力