在 OOP 中使用 Angular答案

【问题标题】：Using Angular in OOP在 OOP 中使用 Angular
【发布时间】：2019-01-17 19:36:51
【问题描述】：

我目前正在尝试如何在 OOP 中实现 Angular。我的测试站点如下所示：

class userData {

    catchDropDownSelection(){
        this.dropDownSelection = $('#xDropDown option:selected').text();
        console.log("dropDownSelection is ", this.dropDownSelection)
    }
}

class sendData{
    constructor(userData){
        this.userDataClone = userData;

    }

    sendDropDownSelection(){
        //this.userDataClone.catchDropDownSelection();
        console.log("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.log("$.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.log("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>

所以，当我运行网站时，使用 OOP 与 angular 关联的 div 首先显示整个 angular 表达式字符串 {{data1 + " " + data2}}，然后在页面完全完成后立即切换到解析结果已加载（请参阅 bodytag 中的 onload 函数）。

当我不使用 OOP 时，这个外观问题就消失了。首先，我认为我可以通过简单地从脚本内部调用 xMyApp() 方法来解决这个问题，如下所示：

[full scriptcode]
angularAppsInstance.xMyApp()

我认为这会有所帮助，因为它类似于非 OOP，其中任何未明确排除在 onloadexecution 之外的功能都会尽快执行。但实际上，它并没有改变任何东西。

那么，有没有什么优雅的方法可以在不完全放弃 OOP 方法的情况下解决这个问题？或者无论如何在OOP代码中使用角度是一个“坏”的想法？我以前从未使用过 Angular，所以如果有人能给我小费，我会很高兴。

编辑：如果您想亲自尝试 OOP/非 OOP 方法有何不同，只需注释掉：

var angularAppsInstance =  new angularApps(sendDataInstance, userDataInstance);

和

angularAppsInstance.xMyApp()

并在这部分发表评论：

var myApp = angular.module('xMyApp', []);
myApp.controller("xMyCtrl", function($scope){
$scope.data1 = "test1";
$scope.data2 = "test2";
})

【问题讨论】：

您好，stacksn-p 既不支持 angular 也不支持 php。尝试改用代码块。编辑器工具栏中的{ } 图标
我还没有完全理解你的问题，或者你想要做什么。但是 Angular 2+ 是一种选择吗？因为这似乎更适合您的编码风格。
问题在于非 OOP 方法比 OOP 方法提供了更好的结果。在非 OOP 方法中，角度代码的结果会立即显示出来。在 OOP 方法中，您会在几毫秒内看到原始表达式字符串，然后它会变成结果。我想知道这个外观问题是否可以优雅地解决。
你为什么一直重复OOP这个词，好像它对你的问题有任何作用？你可能只是在做错事之前做对了，现在你做错了。你能展示代码在哪里工作吗？
@Xatenev 看看我的编辑，如果你想比较这两种方法的结果，就像我在编辑中说的那样做。

标签： javascript php html angularjs

【解决方案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>

【讨论】：