gpt4 book ai didi

javascript - AngularJS Controller 模式和 $scope 与关键字 this 相同吗?

转载 作者:行者123 更新时间:2023-12-03 03:25:28 25 4
gpt4 key购买 nike

我的 AngularJS 不工作代码缺少什么?目前,我正在尝试重构AngularJS工作代码。据我了解,this关键字相当于$scope。另外,对于我的 AngularJS 不工作 代码,我试图理解为什么它不工作。我见过工作代码使用这种模式。我正在尝试获取更多背景信息。

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>

最佳答案

Controller this$scope不一样。在使用 Controller 声明的 View 变量中,this(this 字段)可用作对象的字段。对象名称在 controllerAs 设置中设置(例如在路由配置中设置)。例如。如果 controllerAs 设置为“$ctrl”,您可以在 View 中将变量 classBold 访问为 $ctrl.classBold

关于javascript - AngularJS Controller 模式和 $scope 与关键字 this 相同吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46354033/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com