控制器中此范围与范围之间的差异

时间:2021-11-24 13:37:01

I'm new to angularjs. What is the difference if You assign function to $scope or this keywords in the controller? Thank You.

我是angularjs的新手。如果您将函数分配给$ scope或控制器中的此关键字,有什么区别?谢谢。

Example (scope):

示例(范围):

.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.testFunc = function () {
    };
}]);

Example (this)

示例(本)

.controller('TestCtrl', [function () {
    var app = this;
    app.testFunc = function () {
    };
}]);

2 个解决方案

#1


10  

$scope is a core concept of angular framework and dual data-binding functionnalities. Its for example, designed to share its content with :

$ scope是角度框架和双重数据绑定功能的核心概念。例如,旨在与以下内容分享其内容:

  • templates
  • 模板
  • directives
  • 指令
  • etc
  • 等等

In a template for example, you'll need to bind a function to the scope to access it. You'll not be able to call a function binded on this directly.

例如,在模板中,您需要将函数绑定到作用域以访问它。您将无法直接调用绑定此功能的功能。


Edit: Thank to BKM post that pointed out that this behavior is possible with the "controller as" syntax which binds your template directly to the controller. But it's up to you to decide if you want to let access all objects/variables of your controller in your template instead of having a dedicated viewModel (scope). For pros and cons, see : https://groups.google.com/forum/#!topic/angular/84selECbp1I

编辑:感谢BKM的帖子,指出这种行为可以通过“控制器为”语法将模板直接绑定到控制器。但是由您决定是否要在模板中访问控制器的所有对象/变量而不是具有专用的viewModel(范围)。有关优缺点,请参阅:https://groups.google.com/forum/#!topic / angular / 84selECbp1I


It's an important concept of angular that you need to understand.

这是一个重要的角度概念,你需要了解。

See :

见:

this keywork refers only the the javascript object refering to your controller, nothing more.

这个关键字只涉及引用你的控制器的javascript对象,仅此而已。

#2


8  

What Bixi said was wrong. It isn't necessary to have a function bind to the scope inorder to access it.

比西说错了。没有必要将函数绑定到范围以便访问它。

In the newest version of Angular JS i.e, 1.2 they have introduces a new keyword controllerAs to make it possible not to have scope inside a controller.

在最新版本的Angular JS即1.2中,他们引入了一个新的关键字控制器,以便不在控制器内部使用范围。

<div ng-controller="testCtrl as test">
    {{test.value}}
</div>

And in your controller

在你的控制器

app.controller('testCtrl ', function () {
   this.value = 'Hello World';
});

See the above controller is generated with out injecting $scope in it.

看到上面的控制器是在没有注入$ scope的情况下生成的。

Here is a good video tutorial explaining this

这是一个很好的视频教程解释这个

#1


10  

$scope is a core concept of angular framework and dual data-binding functionnalities. Its for example, designed to share its content with :

$ scope是角度框架和双重数据绑定功能的核心概念。例如,旨在与以下内容分享其内容:

  • templates
  • 模板
  • directives
  • 指令
  • etc
  • 等等

In a template for example, you'll need to bind a function to the scope to access it. You'll not be able to call a function binded on this directly.

例如,在模板中,您需要将函数绑定到作用域以访问它。您将无法直接调用绑定此功能的功能。


Edit: Thank to BKM post that pointed out that this behavior is possible with the "controller as" syntax which binds your template directly to the controller. But it's up to you to decide if you want to let access all objects/variables of your controller in your template instead of having a dedicated viewModel (scope). For pros and cons, see : https://groups.google.com/forum/#!topic/angular/84selECbp1I

编辑:感谢BKM的帖子,指出这种行为可以通过“控制器为”语法将模板直接绑定到控制器。但是由您决定是否要在模板中访问控制器的所有对象/变量而不是具有专用的viewModel(范围)。有关优缺点,请参阅:https://groups.google.com/forum/#!topic / angular / 84selECbp1I


It's an important concept of angular that you need to understand.

这是一个重要的角度概念,你需要了解。

See :

见:

this keywork refers only the the javascript object refering to your controller, nothing more.

这个关键字只涉及引用你的控制器的javascript对象,仅此而已。

#2


8  

What Bixi said was wrong. It isn't necessary to have a function bind to the scope inorder to access it.

比西说错了。没有必要将函数绑定到范围以便访问它。

In the newest version of Angular JS i.e, 1.2 they have introduces a new keyword controllerAs to make it possible not to have scope inside a controller.

在最新版本的Angular JS即1.2中,他们引入了一个新的关键字控制器,以便不在控制器内部使用范围。

<div ng-controller="testCtrl as test">
    {{test.value}}
</div>

And in your controller

在你的控制器

app.controller('testCtrl ', function () {
   this.value = 'Hello World';
});

See the above controller is generated with out injecting $scope in it.

看到上面的控制器是在没有注入$ scope的情况下生成的。

Here is a good video tutorial explaining this

这是一个很好的视频教程解释这个