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

來源：懂視網責編：小采時間：2020-11-27 22:26:26

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

AngularJS中controller控制器繼承的使用方法:前沿最近在angularjs項目當中，看到 controller 好多都是重復性的代碼，在 controller 當中有好多代碼很相似 function（比如 controller 下的 CRUD 方法），重復性工作太多。后來想，可不可以提出一個service ，但仔細想想，這些CRUD 本來就是

推薦度：

點擊下載本文 文檔為doc格式

導讀AngularJS中controller控制器繼承的使用方法:前沿最近在angularjs項目當中，看到 controller 好多都是重復性的代碼，在 controller 當中有好多代碼很相似 function（比如 controller 下的 CRUD 方法），重復性工作太多。后來想，可不可以提出一個service ，但仔細想想，這些CRUD 本來就是

前沿

最近在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當中，只需要去寫關于業務不同的方法。代碼可維護性大大提高,代碼量也會減下來。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽： controller 繼承的 js教程

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦