Javascript Angularjs最佳实践-$scope与此_Javascript_Angularjs_Angularjs Scope

Javascript Angularjs最佳实践-$scope与此

javascript angularjs

Javascript Angularjs最佳实践-$scope与此,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我试图遵循最佳实践，但在理解何时使用$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="

我试图遵循最佳实践，但在理解何时使用$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>

就目前的情况而言，这很好。但是如果我把这两个函数改成

this.testBtn=testBtn

和

this.getDetails=getDetails单击按钮或选择选项无效，并且控制台日志中不会显示任何错误
为什么在这些示例中“this”不起作用？有没有更好的方法可以做到这一点？
您还需要在视图中使用test和test1 Controllera。然后您必须在控制器中使用此

。优点：具有相同模型名称的嵌套控制器

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


测试按钮
{{test.testResult}
选择1
选择2
选择3
您选择{{test1.test1Result}}

$scope

在控制器绑定到类似

ng route

模块的路由或类似ui路由器的状态时使用。

我将

vm

用于

controllerAs

变量

约翰·帕帕（John Papa）出版了一本关于它的优秀出版物，对我和我的团队来说，它成了一种很好的实践

主要优势：

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

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

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

让我很开心，因为它很短：）

使用

ng click=“testBtn（）”

时，默认情况下，angular将在控制器的

$scope

对象中查找

testBtn

函数。因此，如果您没有将上述函数定义为

$scope.testbtn=function（）…

，angular将不会执行任何操作，因为未定义函数

在控制器的

语法中，使用控制器的范围定义功能/模型。使用此
的最佳实践是将其存储在变量中控制器的第一行，这样您就不会陷入任何范围冲突
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>

角度模块（“testApp”）.控制器（“Test1Ctrl”，Test1Ctrl）；
函数testCtrl（$scope）{
var ctrlScope=此；
ctrlScope.testBtn=函数（）{
如果（ctrlScope.testResult=''| | ctrlScope.testResult==null）{
ctrlScope.testResult=“单击按钮”；
}否则{
ctrlScope.testResult=''；
}
}
}
测试按钮
{{test.testResult}

在我看来，“as”语法使代码更具可读性，并且在嵌套控制器的情况下还会处理名称冲突
 这在javascript中是非常通用的，它指的是当前对象的自引用，但在AngularJs中，要在控制器和html之间共享任何内容，您必须通过$scope共享它，实际上您的代码首先在$scope.testBtn=testBtn中注册“testBtn”然后在函数testBtn（）中实现。
为了理解它，让我在这里重写它：
$scope.testBtn = this.testBtn;
this.testBtn = function() {}

javascript语言不会面临任何排序问题，并且会理解为：
在函数中，此
将引用您在其中运行的对象，该对象是$scope
，因此$scope
中的任何内容都只能通过此内部函数访问，因为它已在$scope
中注册
我建议您使用$scope
，不要使用它以免混淆，也不需要注册然后实现您可以一步完成，这很混乱，我正在重写您的控制器：
function testCtrl($scope) {
    $scope.testBtn = function () {
        if ($scope.testResult == '' || $scope.testResult == null) {
            $scope.testResult = "Button clicked";
        } else {
            $scope.testResult = '';
        }
    }
}

“$scope在控制器绑定到路由（如ng路由模块）或状态（如ui路由器）时使用。”为什么在没有ng路由或状态的情况下不能使用$scope？为什么编辑我必须在controllerAs sytax中使用“this”关键字？非常感谢您的解释。我现在能够从代码中删除$scope。
this.testBtn = function() {}
$scope.testBtn = this.testBtn;

function testCtrl($scope) {
    $scope.testBtn = function () {
        if ($scope.testResult == '' || $scope.testResult == null) {
            $scope.testResult = "Button clicked";
        } else {
            $scope.testResult = '';
        }
    }
}