angularjs之$controller的使用

youhebuke225

于 2022-02-18 10:13:08 发布

阅读量899

点赞数

分类专栏： angularJS 文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/youhebuke225/article/details/122976227

版权

angularJS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

例子

我们可以先运行一下这个例子，看看效果

<!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

youhebuke225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs之$controller的使用

例子我们可以先运行一下这个例子，看看效果<!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
复制链接

扫一扫

专栏目录