Angularjs：服务器端（PHP）的渲染和数据的事件后，结合客户端 [英] Angularjs: server side (php) rendering and data binding client side after an event
问题描述
在后端提供了一个完全渲染现场和前端我要为angularjs处理通过Ajax的呼叫/数据绑定的动态内容，但如果你传递指令NG绑定，然后angularjs直接绑定他们这是他们的初始值NULL用户的任何行动之前。
我找到了一个解决方案，哈克，但我想知道是否有一个更好的或者其他的js框架，不正是我想要做的：
<一个href=\"https://github.com/herschel666/angular-lazy-bind\">https://github.com/herschel666/angular-lazy-bind
下面的例子应该有助于理解我的问题...
一旦JS加载inital值HOLA服务器端（送到服务器端）已经一去不复返了。
我想要的innerHTML /值保持这样的，保持绑定活跃，但懒惰，以便它只是一个动作后更改
重要的一点是angularjs不重写哪些服务器端已经writen（redered）
＆LT; HTML NG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆gt;将文档和LT的称号; /标题＆GT;
＆LT; /头＆GT;＆LT;身体GT;
＆LT; DIV NG控制器=GreetingController＆GT;
＆LT;！ - 这个值已经留...但保留其结合特性，以改变它的AFER用户动作 - ＆GT;
＆LT;跨度NG绑定=问候＆GT; HOLA服务器端＆LT; / SPAN＆GT;
＆LT;按钮NG点击=更新（）＆GT;更新＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR对myApp = angular.module（'对myApp'，[]）;myApp.controller（'GreetingController'，['$范围'，函数（$范围）{
$ scope.update =功能（）{
//做Ajax调用和设置的问候和其他数据绑定
$ scope.greeting ='霍拉！;
}
}]）;
＆LT; / SCRIPT＆GT;
＆LT; / HTML＆GT;
同构
的我想知道是否有一个更好的或者其他的js框架，不正是我想要做的的
您正在试图建立一个 同构的应用程序。 阵营将允许您创建同构的应用程序，但通常需要后端建在node.js中有方式的使用 用PHP 。还有其他解决方案以同构以及。
结合
的重要的是为angularjs不重写哪些服务器端已经writen（redered）的
您可以用
剧本标记传递给它的HTML，使用json_en code <饲料角服务器端数据/ code> PHP函数。启动时通过这种方式角度都会有正确的数据。＆LT;脚本＆GT;
。angular.module（应用）常数（'的ApplicationData'，＆LT;？= json_en code（application_data）来＆GT;）;
＆LT; / SCRIPT＆GT;然后你可以注入
的ApplicationData 并使用它来初始化指令。这种方法是不理想的，因为它迫使你处理相同的数据的两倍。这就是为什么使用等反应这是建来支持同构创建一个同构应用程序时可能是一个更好的选择视图库。The backend delivers a fully rendered site and on the frontend I want for angularjs to handle the dynamic content through ajax-call /data binding but if you deliver the directive ng-bind then angularjs binds them directly to their initial value which is NULL before any user action.
I found a hacky solution but I wanted to know if there is a better one or maybe another js framework that does exactly what I'm trying to do :
https://github.com/herschel666/angular-lazy-bind
the following example should help to understand my problem... once js is loaded the inital value "hola server side"(server side delivered) is gone. I want for the innerhtml/value to stay like that and keep the binding active but lazy so that it would only change it after an action the important thing is for angularjs to not rewrite what server side has already been writen(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>
解决方案isomorphism
I wanted to know if there is a better one or maybe another js framework that does exactly what I'm trying to do
You are trying to build an isomorphic application. React will allow you to create isomorphic applications, but normally requires the backend be built in node.js. There is a way to use React with PHP. There are other solutions to isomorphism as well.
binding
the important thing is for angularjs to not rewrite what server side has already been writen(redered)
You can feed angular the server-side data by passing it in the HTML with a
scripttag, using thejson_encodePHP function. This way angular will have the correct data when it starts up.<script> angular.module('app').constant('applicationData', <?= json_encode(application_data) ?>); </script>Then you can inject
applicationDataand use it to initialize your directive. This approach is less than ideal because it forces you to deal with the same data twice. That's why using a view library like React which was built to support isomorphism is probably a better choice when creating an isomorphic application.这篇关于Angularjs：服务器端（PHP）的渲染和数据的事件后，结合客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
