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