Использование Angular в ООП
В настоящее время я пытаюсь реализовать angular в ООП. Мой тестовый сайт выглядит так:
class userData {
catchDropDownSelection(){
this.dropDownSelection = $('#xDropDown option:selected').text();
console.info("dropDownSelection is ", this.dropDownSelection)
}
}
class sendData{
constructor(userData){
this.userDataClone = userData;
}
sendDropDownSelection(){
//this.userDataClone.catchDropDownSelection();
console.info("this.userDataClone.dropDownSelection inside sendDropDownSelection is ", this.userDataClone.dropDownSelection)
$.post("MyFirstPhP.php", {
userSelection : this.userDataClone.dropDownSelection
}, function (data){
//this.testFunction()
$('#testOutput').html(data);
//document.getElementById("testOutput").innerHTML = "data"
}).fail(function(){
console.info("$.post failed!");
})
}
testFunction(){
//document.getElementById("testOutput").innerHTML = "data"
$('#testOutput').html("data");
}
}
class angularApps {
constructor(sendData, userData){
this.sendDataClone = sendData;
this.userDataClone = userData;
}
xMyApp(){
this.myApp = angular.module('xMyApp', []);
this.myApp.controller("xMyCtrl", function($scope){
$scope.data1 = "test1";
$scope.data2 = "test2";
})
}
}
class setEvents {
constructor(sendData, userData){
this.sendDataClone = sendData;
this.userDataClone = userData;
}
onClickEvents(){
$('#sendDataButton').click(function(){
this.userDataClone.catchDropDownSelection()
//console.info("index catched is ", this.sendDataClone.userDataClone.dropDownSelection)
}.bind(this))
$('#sendDataButton').click(function(){
this.sendDataClone.sendDropDownSelection()
}.bind(this))
}
addAllEvents(){
this.onClickEvents()
}
}
var userDataInstance = new userData;
var sendDataInstance = new sendData(userDataInstance);
var angularAppsInstance = new angularApps(sendDataInstance, userDataInstance);
var setEventsInstance = new setEvents(sendDataInstance, userDataInstance);
/*y
var myApp = angular.module('xMyApp', []);
myApp.controller("xMyCtrl", function($scope){
$scope.data1 = "test1";
$scope.data2 = "test2";
})*/
<!DOCTYPE html>
<html>
<head>
<title>PHP is Awesome!</title>
<script src = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "MyFirstPhP.css">
</head>
<body onload = "setEventsInstance.addAllEvents(); angularAppsInstance.xMyApp()">
<div ng-app = "xMyApp" ng-controller = "xMyCtrl">
{{data1 + " " + data2}}
</div>
<div id = "fancyBackGround">
<select id = "xDropDown">
<option value = "test1">test1</option>
<option value = "test2">test2</option>
</select>
<button id = "sendDataButton">ClickMe!</button>
<p id = "testOutput">not yet</p>
</div>
<script src = "MyFirstPhP.js"></script>
</body>
</html>
<?php
session_start();
$dropDownSelection = $_POST['userSelection'];
echo $dropDownSelection
//$dropDownSelection = $dropDownSelection . "wurde verarbeitet!";
?>
Наиболее важными разделами кода являются:
class angularApps {
constructor(sendData, userData){
this.sendDataClone = sendData;
this.userDataClone = userData;
}
xMyApp(){
this.myApp = angular.module('xMyApp', []);
this.myApp.controller("xMyCtrl", function($scope){
$scope.data1 = "test1";
$scope.data2 = "test2";
})
}
}
и
<div ng-app = "xMyApp" ng-controller = "xMyCtrl">
{{data1 + " " + data2}}
</div>
Итак, когда я запускаю сайт, используя ООП, div, связанный с angular, сначала отображает всю строку выражения angular {{data1 + "" + data2}}, а затем сразу переключается на разрешенные результаты после полной загрузки страницы (см. функции onload внутри bodytag).
Когда я не использую ООП, эта косметическая проблема исчезает. Сначала я подумал, что могу решить эту проблему, просто вызвав метод xMyApp () изнутри скрипта, который выглядит так:
[full scriptcode]
angularAppsInstance.xMyApp()
Я думал, что это поможет, потому что это будет похоже на не-ООП, где любая функциональность, не исключенная специально из onloadexecution, выполняется как можно скорее. Но на самом деле это ничего не меняет.
Итак, есть ли какой-нибудь элегантный способ решить эту проблему, не отказываясь полностью от ООП-подхода? Или все равно использовать angular внутри ООП-кода «плохая» идея? Я никогда раньше не использовал angular, поэтому был бы рад, если бы кто-нибудь дал мне совет.
Обновлено: Если вы хотите сами попробовать, чем отличается подход ООП / не-ООП, просто закомментируйте:
var angularAppsInstance = new angularApps(sendDataInstance, userDataInstance);
и
angularAppsInstance.xMyApp()
и прокомментируйте в этой части:
var myApp = angular.module('xMyApp', []);
myApp.controller("xMyCtrl", function($scope){
$scope.data1 = "test1";
$scope.data2 = "test2";
})
Я еще не совсем понимаю вашу проблему или то, что вы хотите сделать. Но возможен ли вариант Anuglar 2+? Поскольку кажется, что это немного лучше подойдет вашему стилю кодирования.
проблема в том, что подход без ООП дает лучшие результаты, чем подход ООП. В подходе без ООП результаты кода angular отображаются немедленно. В подходе ООП вы видите исходную строку выражения в течение нескольких миллисекунд, а затем она превращается в результат. Хотелось бы узнать, можно ли элегантно решить этот косметический вопрос.
Почему вы все время повторяете слово OOP, как будто оно должно что-то сделать с вашей проблемой? Вы, вероятно, просто что-то делали правильно раньше, а сейчас делаете неправильно. Можете показать код, где он работал?
@Xatenev Посмотрите на мое редактирование, если вы хотите сравнить результаты этих двух подходов, просто сделайте, как я сказал в моем EDIT.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вероятно, это не имеет ничего общего с вашим стилем программирования. AngularJS отображает усы, если он не завершил загрузку. Чтобы предотвратить это, используйте директиву ng-cloak.
Добавьте это в свои стили:
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
display: none !important;
}
</style>
А пока добавьте директиву ng-cloak в свое тело, а затем прочтите об этом в документации!
<body ng-cloak>
</body>
Привет, stacksnippet не поддерживает angular и php. попробуйте вместо этого использовать кодовые блоки. Значок
{ }на панели инструментов редактора