Angularjs:事件发生后的服务器端(php)呈现和数据绑定客户端

Question

Angularjs:事件发生后的服务器端(php)呈现和数据绑定客户端

mex*_*_75 5 php data-binding angularjs ng-bind

后端提供了一个完全呈现的站点,并且在前端我希望angularjs通过ajax-call/data绑定来处理动态内容但是如果你传递指令ng-bind,那么angularjs会将它们直接绑定到它们的初始值,在任何之前为NULL用户行动.

我找到了一个hacky解决方案,但我想知道是否有一个更好的或者可能是另一个js框架,它正是我正在尝试做的事情:

https://github.com/herschel666/angular-lazy-bind

以下示例应该有助于理解我的问题...一旦js被加载,初始值"hola服务器端"(服务器端交付)消失了.我希望innerhtml/value保持这样,并保持绑定活动但是懒惰,这样它只会在一个动作后更改它,重要的是angularjs不重写已经写入的服务器端(redered)

<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body >
<div ng-controller="GreetingController">
  <!-- this value has to stay ... but keep its binding property in order to change it afer an user action -->
  <span ng-bind="greeting"> hola server side</span>
  <button ng-click="update()">update</button>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script type="text/javascript">
    var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.update = function (){
    //do ajax calls and set greeting and other data to bind
    $scope.greeting = 'Hola!';
  }
}]);
</script>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gil*_*man 8

同构

我想知道是否有一个更好的或者可能是另一个js框架,它正是我正在尝试做的事情

您正在尝试构建一个同构应用程序.React将允许您创建同构应用程序,但通常要求后端在node.js中构建.有一种方法可以将 React与PHP 结合使用.同构也有其他解决方案.

捆绑

重要的是angularjs不重写已经写入的服务器端(已重新编译)

您可以script使用json_encodePHP函数通过在带有标记的HTML中传递服务器端数据来提供角度.这样,角度在启动时将具有正确的数据.

 <script>
  angular.module('app').constant('applicationData', <?= json_encode(application_data) ?>);
 </script>

Run Code Online (Sandbox Code Playgroud)

然后你可以注入applicationData并使用它来初始化你的指令.这种方法不太理想,因为它迫使您两次处理相同的数据.这就是为什么在创建同构应用程序时使用像React这样构建来支持同构的视图库可能是更好的选择.

Answer 2

Oli*_*ver 1

Tag 内的 Text: Hola 服务器端没有用，因为它被 Angular 替换为 Greeting 内容。应用程序启动时问候语内容为空。

在javascript中初始化问候语

var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
    $scope.greeting = "greeting initialized";
    $scope.update = function (){
          //do ajax calls and set greeting and other data to bind
        $scope.greeting = 'Hola!';
    }
}]);

Run Code Online (Sandbox Code Playgroud)

完整示例http://jsfiddle.net/ud6z4krk/5/

或者

使用 ng-init 在 HTML 中初始化问候语

<div ng-app="myApp">
<div ng-controller="GreetingController">
  <span ng-init="greeting = 'hola server side'" ng-bind="greeting"></span>
  <button ng-click="update()">update</button>
</div>
</div>

Run Code Online (Sandbox Code Playgroud)

完整示例http://jsfiddle.net/ud6z4krk/8/

或者您为更新按钮创建一个新的属性指令。在指令的参数中，您可以引用您的内容标签。该指令向更新按钮添加一个事件，以从服务器获取新数据并更新引用标签的内容。

归档时间：	10 年，10 月前
查看次数：	3934 次
最近记录：	10 年，10 月前