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当中，只需要去写关于业务不同的 方法。 代码可维护性大大提高,代码量也会减下来。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。