controllerAs

最新推荐文章于 2023-03-07 21:19:56 发布

youhebuke225

最新推荐文章于 2023-03-07 21:19:56 发布

阅读量177

点赞数

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

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

版权

angularJS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

作用

在angular 1.2版本之后，对于数据绑定提供了另外一种方式，就是将数据绑定在this上，然后在模板中对于controller进行重命名，如 <div ng-controller="myCtrl as vm">...</div>
如果在组件中像上述方式使用的话，我们就会使用到了controllerAs

例子

实例一

代码

在非组件中使用，在模板中进行重命名

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl as vm">
      <h1>{{indexName}}</h1>
      <h2>{{vm.childName}}</h2>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        this.childName = "父作用域";
      });
    </script>
  </body>
</html>

效果

在这里插入图片描述

实例二

在组件中使用this进行绑定

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <h2>{{childName}}</h2>
      <!-- 自定义组件 -->
      <hello-world></hello-world>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "父作用域";
      });
      app.directive("helloWorld",function(){
          return {
            restrict:'E',
            template:`
              <div>
                <div>通过$scope绑定的数据: {{childName}}</div>
                <div>通过this绑定的数据: {{vm.dogName}}</div>
              </div>
            `,
            controller:function($scope){
              $scope.childName = "自定义组件",
              this.dogName = "旺财"
            },
            controllerAs:"vm"
          }
      })
    </script>

  </body>
</html>

效果

在这里插入图片描述

youhebuke225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
controllerAs

作用在angular 1.2版本之后，对于数据绑定提供了另外一种方式，就是将数据绑定在this上，然后在模板中对于controller进行重命名，如 <div ng-controller="myCtrl as vm">...</div>如果在组件中像上述方式使用的话，我们就会使用到了controllerAs例子实例一代码在非组件中使用，在模板中进行重命名<!DOCTYPE html><html> <head> &
复制链接

扫一扫