Javascript 使用AngularJS将XML显示双向绑定到表单字段_Javascript_Angularjs_Angularjs Directive

Javascript 使用AngularJS将XML显示双向绑定到表单字段

javascript angularjs

Javascript 使用AngularJS将XML显示双向绑定到表单字段,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,要求用户能够使用表单字段显示和更新XML 为了能够显示XML并将XML元素绑定到from字段，我执行了以下操作：检索XML，转换为JSON（使用xml2json）并将其放入范围（name='domObject'）在HTML上使用angular指令从作用域中获取domObject，并对其进行美化和显示（使用vkbeautify）另外，在同一个html上，将表单字段从作用域绑定到domObject 从domObject到XML&form字段的绑定工作正常。但是，当我对字段中的值进行更新时，显示

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

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

检索XML，转换为JSON（使用xml2json）并将其放入范围（name='domObject'）

在HTML上使用angular指令从作用域中获取domObject，并对其进行美化和显示（使用vkbeautify）

另外，在同一个html上，将表单字段从作用域绑定到domObject

从domObject到XML&form字段的绑定工作正常。但是，当我对字段中的值进行更新时，显示的XML中没有反映相同的内容（尽管可以在domObject中看到更改），即使用该指令时不会发生双向绑定

请帮忙

链接到plunker

代码片段 主脚本：

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>


领域
目录名称




XML显示：
DOM对象：


{{domObject}}

您的

prettyprint

指令最初采用

scope.domObject

，不反映其更改

其中一种方法是设置一个类似的：

App.directive（'prettyprint'，函数（$window）{
返回{
限制：“AC”，
替换：正确，
范围：{
对象：'='
},
链接：函数postLink（范围、元素、属性）{
范围：$watch（'obj'，功能（val）{
var x2js=new$window.x2js（）；
var xmlString=x2js.json2xml_str（val）；
text（vkbeautify.xml（xmlString，4））；
}，对）
}
};
});谢谢你的快速回复，斯坦。工作起来很有魅力。非常感谢你。我试着直接从范围中使用“domObject”上的“watch”，但显然不起作用。