5

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

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

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

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

2 回答 2

8

同构

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

您正在尝试构建同构应用程序。React将允许您创建同构应用程序，但通常需要在 node.js 中构建后端。有一种方法 可以将 React 与 PHP一起使用。同构还有其他解决方案。

捆绑

重要的是 angularjs 不重写服务器端已经写入的内容（重新编写）

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

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

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

于 2014-12-23T04:51:46.863 回答
1

Tag 里面的 Text: hola server 端是没用的，因为它被 Angular 替换成了 Greeting 的内容。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/

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

于 2014-12-17T10:17:04.977 回答