溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

AngularJS中controller控制器繼承的使用方法

發(fā)布時(shí)間：2020-09-03 17:08:55 來(lái)源：腳本之家 閱讀：178 作者：快樂(lè)的開(kāi)發(fā)者 欄目：web開(kāi)發(fā)

前沿

最近在angularjs項(xiàng)目當(dāng)中，看到 controller 好多都是重復(fù)性的代碼，在 controller 當(dāng)中有好多代碼很相似 function（比如 controller 下的 CRUD 方法），重復(fù)性工作太多。后來(lái)想，可不可以提出一個(gè)service ，但仔細(xì)想想，這些CRUD 本來(lái)就是從 Service 中調(diào)用的，如果在提出Service，會(huì)造成 Service 比較混亂，職責(zé)不清晰 。 因?yàn)樽约鹤鲞^(guò)一些后端，借助后端的思想，是不是可以 controller 繼承。

 controllerservice實(shí)現(xiàn)繼承經(jīng)過(guò)一番查閱資料，發(fā)現(xiàn)AngularJS已經(jīng)幫我們提供了controller繼承。我們只需借助 controllerservice 。$controller service api

// 參數(shù)的解釋
// constructor 可以是 function 也可以是 string 
//      如果傳入一個(gè) function, 就會(huì)當(dāng)成 controller 的構(gòu)造函數(shù)
//      如果傳入一個(gè) string，就會(huì)根據(jù)字符串去$controllerProvider 找 注冊(cè)的 controller
//locals 是一個(gè)對(duì)象，注入來(lái)自局部的 controller ,在這里我們認(rèn)為 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字段值卻不會(huì)影響ParentCtrl中的name值，當(dāng)改變ChildCtrl中的name值，ParentCtrl和ChildCtrl的嵌套關(guān)系被打破，再次改變ParentCtrl中的name字段值也不會(huì)影響ChildCtrl中的name值。

以上，給ParentCtrl中的變量賦值是字符串類型，如果給ParentCtrl中的字段賦值對(duì)象類型呢？

==屬性值是對(duì)象

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對(duì)象的被ChildCtrl分享，當(dāng)然也分享了對(duì)象中的name字段，當(dāng)改變ChildCtrl中的vm.name值會(huì)影響到ParentCtrl，也就是不會(huì)把ParentCtrl和ChildCtrl之間的嵌套關(guān)系打破。

嵌套控制器中方法是如何被繼承的？

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方法，添加沒(méi)問(wèn)題；而且ArrayCtrl中的add方法也可以被CollctionCtrl使用；

而且在子控制器中可以重寫父控制器中的方法。

myApp.controller("CollectionCtrl", function($scope){
  //插入到某個(gè)位置
  $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.創(chuàng)建一個(gè) base.controller.js 文件

(function() {
  'use strict';

  angular
    .module('DemoApp')
    .controller('BaseCtrl', BaseCtrl);

  //手動(dòng)注入一些服務(wù)
  BaseCtrl.$inject = ['$scope','CRUDServices'];

  /* @ngInject */
  function BaseCtrl($scope,CRUDServices) {
    var _this = this;
    //當(dāng)前 controller 提供一些方法
    _this.bFormValid = formValid;

    activate();

    ////////////////

    //初始化時(shí)候調(diào)用
    function activate() {

      getList();
    }

    // 獲取數(shù)據(jù)列表
    function getList() {
      //把當(dāng)前的結(jié)果賦值給 bList 屬性上
      _this.bList = CRUDServices.getList();
    }

    // 表單驗(yàn)證
    function formValid(){

      //do some thing
      return false;
    }
  }
})();

代碼很簡(jiǎn)單，我們?cè)?BaseController中提供了一個(gè)簡(jiǎn)單的 formValid() 方法，還初始化調(diào)用了一個(gè)getList() 方法。

2.創(chuàng)建一個(gè)Service 。這個(gè) service 來(lái)提供數(shù)據(jù)服務(wù)

(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.創(chuàng)建child.controller.js 文件 也就是我們最主要的一個(gè)文件

(function() {
  'use strict';

  angular
    .module('DemoApp')
    .controller('ChildCtrl', ChildCtrl);

  //手動(dòng)注入一些服務(wù)
  //ExtendServices 用來(lái)提供數(shù)據(jù)的 Servie
  ChildCtrl.$inject = ['$scope', '$controller','ExtendServices'];

  /* @ngInject */
  function ChildCtrl($scope, $controller,ExtendServices) {

    var vm = this;

    //調(diào)用我們父 controller 
    var parentCtrl = $controller('BaseCtrl', { $scope, $scope,CRUDServices:ExtendServices })

    //通過(guò) angular.extend 把父控制器上的 方法和屬性 綁定到 子的對(duì)象上
    angular.extend(vm, parentCtrl);


    activate();

    ////////////////

    function activate() {
      
      //調(diào)用表單驗(yàn)證方法
      vm.bFormValid();      
      
    }
  }
})();

這樣，我們通過(guò) $controller service 實(shí)現(xiàn)了 controller 的繼承 ，也可以把 child controller 需要的注入的服務(wù) 傳入到 base controller 當(dāng)中 。（{ $scope, $scope,CRUDServices:ExtendServices }），我們child controlller 一行代碼都沒(méi)有寫，就已經(jīng)用了 獲取 列表的 magic power 。如果我們需要調(diào)用表單驗(yàn)證,直接調(diào)用 vm.bFormValid() 就可以。

4.創(chuàng)建child.html 文件 ，我們直接 綁定就ok

<div>
  <!-- 直接綁定 vm.bList 就會(huì)看到輸出結(jié)果-->
  <div ng-repeat="item in vm.bList">{{item}}</div>
</div>

結(jié)束語(yǔ)

這樣下來(lái)以后我們可以提出一個(gè) 公共的 controller ，封裝一些常用的方法，在 controller當(dāng)中，只需要去寫關(guān)于業(yè)務(wù)不同的 方法。 代碼可維護(hù)性大大提高,代碼量也會(huì)減下來(lái)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手