0
我錯過了什麼AngularJS不工作代碼?目前,我正在嘗試重構AngularJS Working的代碼。根據我的理解,這個關鍵字相當於$ 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>
可能的複製[「這個」 VS $範圍在AngularJS控制器](https://stackoverflow.com/questions/11605917 /這個-VS-範圍合angularjs控制器) –