Angularjs: рендеринг на стороне сервера (php) и связывание данных на стороне клиента после события
Бэкэнд предоставляет полностью визуализированный сайт, и на внешнем интерфейсе я хочу, чтобы angularjs обрабатывал динамический контент посредством привязки ajax-call / data, но если вы доставите директиву ng-bind, то angularjs связывает их непосредственно с их начальным значением, равным NULL, перед любым действие пользователя.
Я нашел хакерское решение, но я хотел знать, есть ли лучший или, возможно, другой js framework, который делает именно то, что я пытаюсь сделать:
https://github.com/herschel666/angular-lazy-bind
следующий пример должен помочь понять мою проблему …
после загрузки js первоначальное значение «серверная сторона hola» (серверная сторона доставлена) исчезает.
Я хочу, чтобы innerhtml / value оставался таким и оставлял привязку активной, но ленивой, чтобы она изменилась только после действия
важно, чтобы angularjs не переписывал то, что на стороне сервера уже было записано (отредактировано)
<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>
Решение
изоморфизм
Я хотел знать, есть ли лучший или, возможно, другой JS Framework, который делает именно то, что я пытаюсь сделать
Вы пытаетесь построить изоморфный приложение. реагировать позволит вам создавать изоморфные приложения, но обычно требует, чтобы серверная часть была встроена в node.js. Есть далеко использовать Реагируйте с PHP. Есть другие решения к изоморфизму, а также.
переплет
важно, чтобы angularjs не переписывал то, что на стороне сервера уже было записано (отредактировано)
Вы можете передавать данные на стороне сервера, передавая их в HTML с script тег, используя json_encode PHP функция Таким образом, angular будет иметь правильные данные при запуске.
<script>
angular.module('app').constant('applicationData', <?= json_encode(application_data) ?>);
</script>
Тогда вы можете ввести applicationData и использовать его для инициализации вашей директивы. Этот подход не идеален, потому что он заставляет вас работать с одними и теми же данными дважды. Вот почему использование библиотеки представлений типа React, созданной для поддержки изоморфизма, вероятно, является лучшим выбором при создании изоморфного приложения.
Другие решения
Текст: Привет серверная сторона
внутри тега бесполезно, потому что он заменен на Angular с содержимым приветствия.
Содержимое приветствия пусто при запуске приложения.
Инициализировано приветствие в 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/
или же
Инициализировать в приветствии в HTML с помощью 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>
полный пример http://jsfiddle.net/ud6z4krk/8/
Или вы создаете новую директиву атрибута для своей кнопки обновления.
В параметрах директивы вы можете указать ссылку на свой контент-тег.
Директива добавляет событие к кнопке обновления, чтобы получить новые данные.
с сервера и обновите содержимое указанного тега.