Angularjs: server side (php) rendering and data binding client side after an event

问题

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>

回答1:

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 script tag, using the json_encode PHP 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 applicationData and 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.

回答2:

The Text: hola server side inside the Tag is useless, because it is replaced by Angular with the Content of Greeting. The Content of Greeting ist empty at start of the app.

Initialized of greeting in 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!';
    }
}]);

complete example http://jsfiddle.net/ud6z4krk/5/

Initialize in greeting in HTML with ng-init

<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>

complete example http://jsfiddle.net/ud6z4krk/8/

Or you make a new attribute-directive for your update-button. In the parameters of the directive you can reference to your content-tag. The directive add an Event to the update button to get the new Data from the server and update the contents of the referenced tag.

来源：https://stackoverflow.com/questions/27522211/angularjs-server-side-php-rendering-and-data-binding-client-side-after-an-eve

标签

php

angularjs

data-binding

ng-bind