AngularJS Controller Patterns 和 $scope 与关键字 this 相同吗？

Question

我的 AngularJS 不工作 代码缺少什么？目前，我正在尝试重构 AngularJS Working 代码。据我了解，this 关键字等同于 $scope。另外，对于我的 AngularJS Not Working 代码，我试图理解为什么它不起作用。我见过工作代码使用这种模式。我正在尝试获取更多上下文。

AngularJS 工作

<script>
    var app = angular.module("app", []);
    app.controller("ClassController", function ($scope) {
        $scope.classBold = '';
        $scope.classUnderline = '';

        $scope.MakeBold = function () {
            if ($scope.classBold.length == 0) {
                $scope.classBold = 'bold';
            } else {
                $scope.classBold = '';
            }
        };

        $scope.MakeUnderline = function () {
            if ($scope.classUnderline.length == 0) {
                $scope.classUnderline = 'underline';
            } else {
                $scope.classUnderline = '';
            }
        };
    });

</script>

AngularJS 不工作

<script>
(function(){

angular
.module('classApp')
.controller("ClassController", ClassController);

function ClassController($scope){
        var model = this;
        model.classBold = '';
        model.classUnderline = '';

        model.MakeBold = function () {
            if (model.classBold.length == 0) {
                model.classBold = 'bold';
            } else {
                model.classBold = '';
            }
        };

        model.MakeUnderline = function () {
            if (model.classUnderline.length == 0) {
                model.classUnderline = 'underline';
            } else {
                model.classUnderline = '';
            }
        };
    }
    })();

</script>

HTML

    <!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>

    </head>
<body>

<div ng-app="classApp" ng-controller="ClassController">
    <p ng-class="SpaceDelimitedClass">Write the class name to apply</p>
    <input type="text" ng-model="SpaceDelimitedClass" placeholder="bold italic overline" />

    <hr />
    <p ng-class="{bold : makeBold, italic : makeItalic, overline : makeOverline}">Apply below style</p>
    <label><input type="checkbox" ng-model="makeBold" />Bold</label>
    <label><input type="checkbox" ng-model="makeItalic" />Italic</label>
    <label><input type="checkbox" ng-model="makeOverline" />Overline</label>

    <hr />
    <p ng-class="[classBold, classUnderline]">Apply Below Class</p>
    <button ng-click="MakeBold()">Make Bold</button>
    <button ng-click="MakeUnderline()">Make Underline</button>

    <hr />
    <p ng-class="[MyStyle, {overline : setIt}]">Write or Apply CSS Class</p>
    <input type="text" ng-model="MyStyle" placeholder="bold or italic or oblic" />
    <label><input type="checkbox" ng-model="setIt" />Overline</label>
</div>
</body>
</html>

CSS

<style>
    .bold {
        font-weight:bold;
    }
    .italic {
        font-style:italic;
    }
    .oblic{
        font-style:oblique;
    }
    .underline{
       text-decoration:underline;
    }
    .overline{
        text-decoration:overline;
    }
</style>

Answer 1

控制器 this 和 $scope 不一样。在视图中，使用控制器 this 声明的变量（this 字段）可用作对象的字段。对象名称在 controllerAs 设置中设置（例如在路由配置中设置）。例如。如果 controllerAs 设置为 '$ctrl' 您可以在视图中访问变量 classBold 作为 $ctrl.classBold

AngularJS Controller Patterns 和 $scope 与关键字 this 相同吗？

AngularJS Controller Patterns and is $scope the same as the keyword this?

javascript

angularjs

angularjs-scope