Question

我正在尝试遵循最佳做法，但在了解何时使用$ scope以及何时使用'this'时遇到问题。我有一个使用angularjs 1.4.8的简单示例。

<!DOCTYPE html>
<html ng-app="testApp">
<head>
<title>Test button action</title>
<script src="./angular.min.js"></script>
<script src="./testBtn.js"></script>
</head>
<body>
    <div ng-controller="TestCtrl as test">
        <button ng-click="testBtn()">test button</button>
        {{testResult}}
    </div>
    <div ng-controller="Test1Ctrl as test1">
        <select ng-model="chosen" ng-change="getDetails(chosen)">
            <option value='option1'>Option1</option>
            <option value='option2'>Option2</option>
            <option value='option3'>Option3</option>
        </select>
        <p>You choose {{test1Result}}</p>
    </div>
</body>
</html>

testBtn.js文件看起来像这样

(function() {
    'use strict';
    angular.module("testApp", []);
    angular.module("testApp").controller("TestCtrl", testCtrl);
    angular.module("testApp").controller("Test1Ctrl", test1Ctrl);
    function testCtrl($scope) {
        $scope.testBtn = testBtn;
        function testBtn() {
            if (this.testResult == '' || this.testResult == null) {
                this.testResult = "Button clicked";
            } else {
                this.testResult = '';
            }
        }
    }
    function test1Ctrl($scope) {
        $scope.getDetails = getDetails;
        function getDetails(opt) {
            this.test1Result = opt;
        }
    }
})();

这样可以正常工作。但是，如果我改变两个函数来说 this.testBtn = testBtn;和this.getDetails = getDetails;点击按钮或选择一个选项不起作用，控制台日志中不会显示任何错误。

为什么'this'在这些例子中不起作用？会有更好的方法吗？

Answer 1

您还需要在视图中使用test和test1控制器。然后，您必须在控制器中使用this。优点：具有相同型号名称的嵌套控制器。

<div ng-controller="TestCtrl as test">
    <button ng-click="test.testBtn()">test button</button>
    {{test.testResult}}
</div>
<div ng-controller="Test1Ctrl as test1">
    <select ng-model="test1.chosen" ng-change="test1.getDetails(test1.chosen)">
        <option value='option1'>Option1</option>
        <option value='option2'>Option2</option>
        <option value='option3'>Option3</option>
    </select>
    <p>You choose {{test1.test1Result}}</p>
</div>

当您的控制器绑定到$scope模块或类似ui-router的状态的路由时，将使用

ng-route。

Answer 2

当您使用ng-click="testBtn()"时，默认情况下，angular会在控制器的testBtn对象中查找$scope函数。因此，如果您尚未将上述函数定义为$scope.testbtn = function()...，则angular将不执行任何操作，因为未定义函数。

在控制器的as语法中，使用控制器的this范围定义函数/模型。使用this的最佳做法是将其存储在变量控制器的第一行，这样您就不会陷入任何范围冲突。

angular.module("testApp").controller("Test1Ctrl", test1Ctrl);
    function testCtrl($scope) {
        var ctrlScope = this;
        ctrlScope.testBtn = function() {
            if (ctrlScope.testResult == '' || ctrlScope.testResult == null) {
                ctrlScope.testResult = "Button clicked";
            } else {
                ctrlScope.testResult = '';
            }
        }
    }

<div ng-controller="TestCtrl as test">
    <button ng-click="test.testBtn()">test button</button>
    {{test.testResult}}
</div>

＆＃34;如＆＃34;语法使代码在我看来更具可读性，并且如果控制器是嵌套的，也会处理名称冲突。

Answer 3

我正在使用vm作为controllerAs变量。

约翰帕帕有一篇很好的出版物，对我和我的团队来说，它变成了一种很好的做法。

AngularJS's Controller As and the vm Variable

主要优点：

提供在我的控制器中创建绑定的一致且可读的方法

删除处理此作用域或绑定的任何问题（即嵌套函数中的闭包）

从控制器中删除$ scope，除非我明确地需要它用于其他内容

因为它的简短而让我开心：）

Answer 4

javascript中的

this非常通用，它指的是当前对象的自我引用，但是在AngularJs中，在控制器和html之间共享任何内容，你必须通过$ scope共享它，实际上你的代码正在注册“ testBtn“首先在$scope.testBtn = testBtn;然后在function testBtn()中实现以理解它让我在这里重写它：

$scope.testBtn = this.testBtn;
this.testBtn = function() {}

javascript语言不会遇到任何排序问题，并将其理解为：

this.testBtn = function() {}
$scope.testBtn = this.testBtn;

函数this中的

将引用您在$scope内部运行的对象，因此$scope内的任何内容都可以通过此内部函数访问，因为它在{{1}中注册已经。

我建议您使用$scope并且不要使用它不要混淆，也不需要注册然后实现你可以一步完成，这很混乱，在这里我重写你的控制器：

$scope

Angularjs最佳实践 - $ scope vs this

4 个答案: