angularjs 指令在页面加载期间显示 json

Question

我正在构建我的第一个 AngularJS 动态表单，该表单基于使用 AngularJS 指令从 JSON 文件收到的信息构建。

一切正常，我的问题是 JSON 代码在页面加载时显示 - 一旦页面加载，JSON 代码就会消失。

我是不是做错了什么？

选中 http://plnkr.co/edit/v4jOwuF6jmZfORlNbvIB?p=preview 以查看行为，多次单击 "Stop"/"Start" 以查看行为。

HTML代码：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="ViewCtrl">
    <div ng-repeat="page in form.form_pages">
      <div ng-repeat="field in page.page_fields" class="form-group">
        <field-directive field="field" ng-form="subForm"></field-directive>
      </div>
    </div>
</body>

js代码：

'use strict';

angular.module('myApp',[])
    .controller('ViewCtrl', ['$scope', function($scope) {
        var jsonStr='{"form_id":"1","form_name":"My Test Form","form_pages":{"1":{"page_id":1,"page_title":"My First Tab","page_hide":false,"page_fields":{"1":{"field_id":1,"field_title":"First Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"2":{"field_id":2,"field_title":"Last Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"3":{"field_id":3,"field_title":"Gender","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false},"4":{"field_id":4,"field_title":"Email Address","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"5":{"field_id":5,"field_title":"Password","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"6":{"field_id":6,"field_title":"Birth Date","field_type":"textfield","field_value":"1981-01-10T06:00:00.000Z","field_required":true,"field_disabled":false},"7":{"field_id":7,"field_title":"Your browser","field_type":"textfield","field_value":"2","field_required":false,"field_disabled":false},"8":{"field_id":8,"field_title":"Additional Comments","field_type":"textarea","field_value":"","field_required":true,"field_disabled":false},"9":{"field_id":9,"field_title":"I accept the terms and conditions.","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false}}}}}';

        $scope.form = JSON.parse(jsonStr);

    }])

    .directive('fieldDirective',function($http, $compile) {

      var linker = function(scope, element) {
        // GET template content from path
        var templateUrl = "textfield.html";
        $http.get(templateUrl).success(function(data) {
            element.html(data);
            $compile(element.contents())(scope);
        });
      }

      return {
        template: '<div>{{field}}</div>',
        restrict: 'E',
        scope: {
            field: '='
        },
        link: linker
    };
    })

textfield.html - html 模板：

<div class="row" ng-form="subForm" ng-class="{'has-success': subForm[field.field_id].$invalid}">
    <div class="col-sm-5">{{field.field_title}}:</div>
    <div class="col-sm-7">
        <input type="text"
            placeholder="{{field.field_title}}"
            ng-model="field.field_value" 
            value="{{field.field_value}}" 
            ng-required="field.field_required"
            ng-disabled="field.field_disabled"
            class="form-control"
            id = "{{field.field_id}}"
            name = "{{field.field_id}}" >
        <div ng-show="subForm[field.field_id].$touched && subForm[field.field_id].$error && subForm[field.field_id].$invalid">Field '{{field.field_title}}'
            <span ng-show="subForm[field.field_id].$error.required"> is required.</span>
        </div>
    </div>
</div>

谢谢。

Answer 1

http://plnkr.co/edit/YC9p0UluhHyEgAjA4D8R?p=preview

基本上，我只是编译字符串，然后直接插入编译后的元素，而不是将加载的模板添加到元素中然后就地编译它

        element.append($compile(data)(scope));

似乎您仍然可以看到延迟，但这可能是模板的异步加载导致的，需要在网络面板中进行调试并进行一些分析或记录以查看到底发生了什么。

编辑制作了一个 plnkr 的分支以显示一个内联模板，这样就不会延迟使用 $http http://plnkr.co/edit/Tnc3VOeI8cELDJDHYPTO?p=preview 获取它，而只是从模板缓存中同步获取它并在脚本块中使用 ng-template 来加载它提前。

angularjs 指令在页面加载期间显示 json

angularjs directive displays json during page load

json

angularjs

directive