Angularjs：事件后的服务器端（php）渲染和数据绑定客户端答案

【问题标题】：Angularjs: server side (php) rendering and data binding client side after an eventAngularjs：事件后的服务器端（php）渲染和数据绑定客户端
【发布时间】：2015-02-15 19:14:44
【问题描述】：

后端提供了一个完全渲染的站点，在前端我希望 angularjs 通过 ajax-call /data 绑定来处理动态内容，但是如果你提供指令 ng-bind 然后 angularjs 将它们直接绑定到它们的初始值，即在任何用户操作之前为 NULL。

我找到了一个 hacky 解决方案，但我想知道是否有更好的或者另一个 js 框架可以完全满足我的要求：

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

下面的例子应该有助于理解我的问题...... 一旦加载了js，初始值“hola server side”（服务器端交付）就消失了。我希望 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>

【问题讨论】：

ngBind 属性告诉 Angular 将指定 HTML 元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。
我知道 ngBind 做了什么，而这正是我需要做的，修改它的行为或使用其他方法或其他框架
如果我理解正确，解决方案不是在控制器实例化时将 $scope.greeting 设置为“神圣的服务器端”吗？

标签： php angularjs data-binding ng-bind

【解决方案1】：

同构

我想知道是否有更好的或者另一个 js 框架可以做我想做的事情

您正在尝试构建一个同构应用程序。 React 将允许您创建同构应用程序，但通常需要在 node.js 中构建后端。有a way to use React with PHP。同构也有other solutions。

绑定

重要的是 angularjs 不重写服务器端已经写好的（redered）

您可以使用json_encode PHP 函数在带有script 标签的HTML 中传递服务器端数据的角度。这样 Angular 在启动时就会有正确的数据。

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

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

【讨论】：

【解决方案2】：

文本：hola 服务器端 Tag里面是没用的，因为被Angular换成了Greeting的Content。 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!';
    }
}]);

完整示例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>

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

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

【讨论】：

1) 在浏览器中打开角度 CDN 链接对我来说非常适合。前导双斜杠表示“协议相关”。请参阅stackoverflow.com/questions/9646407/… 2) 事实上，“hola 服务器端”正在被 angular 取代，这正是问题所要解决的问题。所需的初始值（在本例中为“hola 服务器端”）已经存在，令人讨厌的是，在实际发生任何交互之前，angular 会与它发生冲突。
不幸的是，更新后的解决方案也不起作用，因为如果您禁用 JS（SEO/爬虫的观点），那么 span 将只是空的，这是不可接受的。更重要的是，使用这种方法，您将在网站初始加载后进行大量 JS 操作（导致 dom repaint/reflow），这是完全没有必要的，因为所需的初始值已经由服务器提供。
添加第三种解决方案，让搜索引擎的初始 HTML 内容保持不变。