例子
我们可以先运行一下这个例子,看看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{indexName}}</h1>
<div class="router-content">
<a ui-sref="R1">R1</a><br>
<a ui-sref="R2">R2</a>
<div ui-view></div>
</div>
</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
app.controller("myCtrl", function ($scope) {
$scope.indexName = "主页";
});
app.controller("commonCtrl",function ($scope) {
$scope.name = "commonCtrl"
$scope.sayHello = function(){
console.log("hello");
}
$scope.sayWorld = function(){
console.log("world");
}
})
app.config(function($stateProvider){
$stateProvider.state("R1",{
url:"R1",
template:`
<div>
<h1>Hello</h1>
<h2>{{name}}</h2>
<button ng-click="sayHello()">btn1</button>
<button ng-click="sayWorld()">btn2</button>
</div>
`,
controller:function($scope,$controller){
$controller("commonCtrl",{
$scope:$scope
})
$scope.sayWorld = function () {
console.log("R1 world");
}
}
});
$stateProvider.state("R2",{
url:"R2",
template:`
<div>
<h1>Hello</h1>
<h2>{{name}}</h2>
<button ng-click="sayHello()">btn1</button>
<button ng-click="sayWorld()">btn2</button>
</div>
`,
controller:function($scope,$controller){
$controller("commonCtrl",{
$scope:$scope
})
$scope.name="R2"
$scope.sayHello = function () {
console.log("R2 hello");
}
}
})
})
</script>
</body>
</html>
分别点击R1和R2,我们看到的效果大致如下
点击R2
我们看到的是当我们点击R1的时候,name的取值为commonctrl,当我们分别点击的btn1和btn2时候的时候,我们会发现,如果在当前controller中声明的方法,就会去当前controller中的方法,如果没有声明,就会取commonCtrl中的方法
语法
$controller
就相当于继承
$controller(ctrollerName,{...})
ctrollerName
为继承的controller的名字{...}
为复写的变量,也就相当于融合,如下例子
解释
$controller("commonCtrl",{
$scope:$scope
})
- 他所表示得就是,当前controller的
$scope
继承commonCtrl的$scope
(两个$scope
进行融合) - 这样,控制当前页面的controller其实就是commonCtrl,而路由对应的controller只是为了复写
- 如果接触过vue2的话,他就相当于
mixin