使用AngularJS對XML顯示進行雙向綁定以形成表單字段

Question

要求用戶應該能夠使用表單字段顯示和更新XML。

為了能夠顯示XML並將XML元素綁定到from字段，我執行了以下操作：

檢索XML，轉換為JSON（使用xml2json）並將其放在范圍內（名稱=“ domObject”）。
在HTML上使用angular指令從作用域中獲取domObject並對其進行精化並顯示（使用vkbeautify）
另外，在同一html上，將表單域從作用域綁定到domObject。

從domObject到XML＆form字段的綁定工作正常。 但是，當我在字段中更新值時，顯示的XML中不會反映出相同的值（盡管更改可以在domObject中看到），即使用指令時不會發生2種方式的綁定。

請幫忙。

在這里鏈接到punker

代碼段

主要腳本：

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 ，並且不會反映其更改。

執行此操作的方法之一是設置類似以下內容的觀察者：

 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) } }; });

這是工作的plnkr 。

使用AngularJS對XML顯示進行雙向綁定以形成表單字段

問題描述

代碼段

1 個解決方案

解決方案1
1 已采納 2017-12-12 09:21:53

使用AngularJS對XML顯示進行雙向綁定以形成表單字段

問題描述

代碼段

1 個解決方案

解決方案1 1 已采納 2017-12-12 09:21:53

解決方案1
1 已采納 2017-12-12 09:21:53