最近在angularjs專案當中，看到 controller 好多都是重複性的程式碼，在 controller 當中有好多程式碼很相似 function（例如 controller 下的 CRUD 方法），重複性工作太多。後來想，可不可以提出一個service ，但仔細想想，這些CRUD 本來就是從 Service 中呼叫的，如果在提出Service，會造成 Service 比較混亂，職責不清晰 。 因為自己做過一些後端，借助後端的思想，是不是可以 controller 繼承。本文主要介紹了AngularJS中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){
})
<p ng-controller="ParentCtrl">
<label>父控制器中的name变量值</label> <input ng-model="name" />
<p 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>
</p>
</p>登入後複製
以上，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){
})
<p ng-controller="ParentCtrl">
<label>父控制器中的vm.name变量值</label> <input ng-model="vm.name" />
<p 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>
</p>
</p>登入後複製
以上，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){
})
<p 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>
<p 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>
</p>
</p>登入後複製
使用ArrayCtrl中的add方法，加入沒問題；而且ArrayCtrl中的add方法也可以被CollctionCtrl使用；
而且在子控制器中可以重寫父控制器中的方法。
myApp.controller("CollectionCtrl", function($scope){
//插入到某个位置
$scope.add = function(name, index){
$scope.myArray.splice(index,0, name);
}
})
<p 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>
<p 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>
</p>
</p>登入後複製
程式碼案例
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
#
<p>
<!-- 直接绑定 vm.bList 就会看到输出结果-->
<p ng-repeat="item in vm.bList">{{item}}</p>
</p>登入後複製
結束語
這樣下來以後我們可以提出一個公共的controller ，封裝一些常用的方法，在controller當中，只需要去寫關於業務不同的方法。 程式碼可維護性大大提高,程式碼量也會減下來。
相關推薦：
Zend_Controller_Plugin外掛用法
Node.js框架ThinkJS 開發 controller解說####### ######微信網頁開發之創建Controller######
以上是AngularJS中controller控制器繼承的方法教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
