Angularjs 使用数据库中的内联代码_Angularjs_Templates_Browser Cache

Angularjs 使用数据库中的内联代码

angularjs templates

Angularjs 使用数据库中的内联代码,angularjs,templates,browser-cache,Angularjs,Templates,Browser Cache,在我的应用程序中，我让一个用户编辑一页信息（通过HTML编辑器：内容工具）。我已经开始修改功能代码，以便他们正在编辑的页面是用动态模板构建的，而不是硬编码的目前，我正在数据库表中存储已编辑/可编辑的数据。我还将模板定义存储在数据库表中。我使用的模板只是以前硬编码的HTML代码，因此我知道该模板是有效的此时，我正确地从服务器接收到JSON包装中的所有数据。不起作用的是呈现内容--页面保持空白。我确信问题在于我对AngularJS及其执行方式缺乏理解 [更新：代码和以下执行说明在使用@Wes H

在我的应用程序中，我让一个用户编辑一页信息（通过HTML编辑器：内容工具）。我已经开始修改功能代码，以便他们正在编辑的页面是用动态模板构建的，而不是硬编码的

目前，我正在数据库表中存储已编辑/可编辑的数据。我还将模板定义存储在数据库表中。我使用的模板只是以前硬编码的HTML代码，因此我知道该模板是有效的

此时，我正确地从服务器接收到JSON包装中的所有数据。不起作用的是呈现内容--页面保持空白。我确信问题在于我对AngularJS及其执行方式缺乏理解

[更新：代码和以下执行说明在使用@Wes H和@31PIY的输入进行返工后已更新。显然，不再是$templateCache问题。] 具体来说，我的HTML是：

<body ng-app>
    <div ng-controller="PageEditController">
        <div ng-bind-html="renderHtml(htmlTemplate)"></div>
    </div>
</body>

控制台输出为：

jsLoadScreen Data: {UID:"1"
 left:"<h1>↵    One↵</h1>"
 right:"<h2>↵    Two↵</h2>"
 screenId:"1"
 template:"        <div class="row">↵            <div class="column">↵                <div data-editable data-name="left" ng-bind-html="renderHtml(models.fields.left)">↵                </div>↵            </div>↵            <div class="vl"></div>↵            <div class="column">↵                <div data-editable data-name="right" ng-bind-html="renderHtml(models.fields.right)">↵                </div>↵            </div>↵        </div>"

replacing template:         <div class="row">
            <div class="column">
                <div data-editable data-name="left" ng-bind-html="renderHtml(models.fields.left)">
                </div>
            </div>
            <div class="vl"></div>
            <div class="column">
                <div data-editable data-name="right" ng-bind-html="renderHtml(models.fields.right)">
                </div>
            </div>
        </div>

jsLoadScreen数据：{UID:“1”
左：“↵    一个↵"
对：“↵    两个↵"
屏幕ID：“1”
模板：“↵            ↵                ↵                ↵            ↵            ↵            ↵                ↵                ↵            ↵        "
替换模板：

我已经验证了模板代码正在页面上加载（通过“查看源代码”）。但是，一旦加载，模板代码中没有javascript或AngularJS标记被执行

我已经尝试了几个步骤来执行这段代码，包括添加另一个

.then（）

，以保证触摸模板中的一些变量以强制刷新，以及各种倒霉的尝试，以在出现竞争条件的情况下导致过程延迟。没有运气

对于AngularJS来说，我是不是陷入了一种奇怪的境地，我应该放弃并在服务器端组合模板和数据，让它成为一个单一的AJAX操作，而不是尝试执行两个步骤：（1）AJAX插入新的HTML模板，一旦插入，然后（2）AJAX将新数据插入到新的HTML模板中？或者我是否应该对新插入的模板（或者在插入模板时）做些什么来将其注册为javascript执行的内容

我所看到的最贴切的描述是：但我不能完全围绕他们说的话和我试图做的失败的事情来思考

更新：

在完成了前面的回答之后，我更接近了。通过@Wes H和@31piy的信息，我现在已经验证了HTML是否正确加载到页面上（如Chrome上开发者工具中的“查看源代码”所示）。但是，各种角度命令（ng bind HTML（renderHtml…）和第三方工具触发器（数据可编辑）看起来不是Angular解释的，所以我有HTML，但没有与之相关的javascript活动。我猜插入的HTML模板以某种方式放在DOM中，但Angular（或javascript）实际上无法识别和执行.想法？

首先，免责声明……我一点也不了解AngularJS，所以请恕我直言

尽管如此，在阅读本文之后，我看了一下文档：

看起来您已经通过直接使用

$templateCache

服务以声明方式创建了缓存。现在，您需要通过以下方法之一呈现它：

myApp.component（'myComponent'{
templateUrl:'edit.html'
});

或

$templateCache.get（'edit.html'））

此外，由于您直接使用服务，因此不需要使用脚本标记。根据文档，您可以采用一种或另一种方法

希望这有帮助！

开始，免责声明……我根本不认识AngularJS，所以请恕我直言

尽管如此，在阅读本文之后，我看了一下文档：

看起来您已经通过直接使用

$templateCache

服务以声明方式创建了缓存。现在，您需要通过以下方法之一呈现它：

myApp.component（'myComponent'{
templateUrl:'edit.html'
});

或

$templateCache.get（'edit.html'））

此外，由于您直接使用服务，因此不需要使用脚本标记。根据文档，您可以采用一种或另一种方法

希望有帮助！

假设所有相关配置都在AngularJS应用程序中完成，我认为，您根本不需要使用

$templateCache

。为什么？您希望在HTML中设置数据库中的HTML模板（如果我理解正确的话）

为此，只需使用

ng bind html

，即可将html内容绑定到模板中的html元素。以下是一个示例：

$http.post('https://my-api-access-point', parms)
  .then(function successCallback(response) {
    // ... Your code
    // Assign the template to a scope variable here
    $scope.htmlTemplate = $scope.models.fields['template'];
    // ... Your code
  });

现在，在作用域中有一个变量

htmlTemplate

，它可以直接绑定到HTML模板，如下所示：

<div ng-bind-html="htmlTemplate"></div>

这样，

htmlTemplate

的内容将显示在

div

元素下。您需要确保在应用程序中正确配置了模块。

假设所有相关配置都在AngularJS应用程序中完成，在我看来，您根本不需要使用

$templateCache

。为什么？您想要要在HTML中设置的DB中的HTML模板（如果我理解正确的话）

为此，只需使用

ng bind html

，即可将html内容绑定到模板中的html元素。以下是一个示例：

$http.post('https://my-api-access-point', parms)
  .then(function successCallback(response) {
    // ... Your code
    // Assign the template to a scope variable here
    $scope.htmlTemplate = $scope.models.fields['template'];
    // ... Your code
  });

现在，在作用域中有一个变量

htmlTemplate

，它可以直接绑定到HTML模板，如下所示：

<div ng-bind-html="htmlTemplate"></div>

这样，

htmlTemplate

的内容将显示在

div

元素下