$scope与this的区别

最新推荐文章于 2023-11-02 09:03:28 发布

youhebuke225

最新推荐文章于 2023-11-02 09:03:28 发布

阅读量553

点赞数

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

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

版权

angularJS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

作用

当controller嵌套的时候，主要是为了区别模板中使用的属性到底来源于自身还是继承
但是绑定在this上面的属性，必须通过对于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>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <!-- 自定义组件 -->
      <div>{{name}}</div>
      <section ng-controller="childCtrl">
        <div>{{name}}</div>
      </section>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.name="父controller的name";
      });
      app.controller("childCtrl",function($scope){
        // 当前controller没有name属性，会取父controller中的name属性
      })
    </script>
  </body>
</html>

效果

对于代码的解释

因为当前controller中没有相关的name属性，那么他就会找到父controller的name属性
但是，当controller嵌套过多的时候，我们就很难知道当前的属性会来自于哪个controller，所以这个时候this的绑定就排上用场了，可以看下面的一个例子

<!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>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl as parent">
      <h1>{{parent.indexName}}</h1>
      <!-- 自定义组件 -->
      <div>{{parent.name}}</div>
      <section ng-controller="childCtrl">
        <div>{{parent.name}}</div>
      </section>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        this.indexName = "主页";
        this.name="父controller的name";
      });
      app.controller("childCtrl",function($scope){
        // 当前controller没有name属性，会取父controller中的name属性
      })
    </script>
  </body>
</html>