使用 AngularJS 双向绑定 XML 显示以形成字段

Question

要求用户能够使用表单字段显示和更新 XML。

为了能够显示 XML 并将 XML 元素绑定到 from 字段，我执行了以下操作：

检索 XML，转换为 JSON（使用 xml2json）并将其放入范围 (name='domObject').
在 HTML 上使用 angular 指令从作用域中获取 domObject 并美化它并显示它（使用 vkbeautify）
此外，在同一个 html 上，将表单字段绑定到作用域中的 domObject。

从 domObject 到 XML 和表单字段的绑定工作正常。但是，当我更新字段中的值时，显示的 XML 中并未反映相同的内容（尽管可以在 domObject 中看到更改），即使用指令时未发生 2 种方式绑定。

请帮忙

Link 到 plunker here

代码片段

主要脚本：

var App = angular.module('myApp', []);
App.controller('myCtrl', function($scope, $http, $window) {

    $http.get("sample.xml")
        .then(function(response) {

        var x2js = new $window.X2JS();
        var jsonDocument = x2js.xml_str2json( response.data );
        $scope.domObject = jsonDocument;
        $scope.dataLoaded = true;
    });

})

App.directive('prettyprint', function($window) {
    return {
        restrict: 'C',
        replace: true,
        link: function postLink(scope, element, attrs) {
            var x2js = new $window.X2JS();
            var xmlString = x2js.json2xml_str(scope.domObject);
            element.text(vkbeautify.xml(xmlString, 4));
        }
    };
});

HTML 片段：

<body ng-app="myApp">
    <section class="container">
                <div class="form-style-3" ng-controller="myCtrl">
                    <form novalidate ng-if="dataLoaded">
                        <fieldset><legend>Fields</legend>
                            Catalog Name
                            <input type="text" ng-model="domObject.catalog.name" />
                        </fieldset>
                    </form>
              <br />
          <div>
            <br />
                    XML Display:
                    <pre class="prettyprint lang-xml" ng-if="dataLoaded"></pre>

                    DOM Object: <br /><br />
                    {{domObject}}

                </div>
                </div>

    </section>
</body>

Answer 1

您的 prettyprint 指令最初采用 scope.domObject 并且不反映其更改。

实现此目的的方法之一是设置 watcher 如：

App.directive('prettyprint', function($window) {
    return {
        restrict: 'AC',
        replace: true,
        scope: {
          obj: '='
        },
        link: function postLink(scope, element, attrs) {
            scope.$watch('obj', function(val) {
              var x2js = new $window.X2JS();
              var xmlString = x2js.json2xml_str(val);
              element.text(vkbeautify.xml(xmlString, 4));
            }, true)
        }
    };
});

这里是working plnkr。

使用 AngularJS 双向绑定 XML 显示以形成字段

Using AngularJS for two-way binding of XML display to form fields

javascript

angularjs

angularjs-directive

代码片段