前沿
最近在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當中，只需要去寫關于業務不同的 方法。 代碼可維護性大大提高,代碼量也會減下來。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
