Question

我正在构建泛型angularjs指令以支持编辑json对象。我有json数据和管理数据，以获得有关原始数据的详细信息。以下代码详细信息，我用于构建我的泛型指令。有关正在运行的代码，请参阅Plunker。

http://plnkr.co/edit/x2lqHjYq48gwxW7oYyEQ?p=preview
Directive Code:
app.directive("objecteditor", [function () {
        return {
            restrict: "E",
            templateUrl: "ObjectEditor.html",
            replace: true,
            scope: {
                object: '=',
                objectAdmin: '='
            },
            link: function (scope, element, attrs) {

                //Method to initialize 
                scope.init = function () {

                };
                //Call init() to initialze the loading.
                scope.init();                
            }
        };
    }]);

指令模板：

<div>
  <h4 data-ng-bind-template="{{objectAdmin.displayName}}"></h4>
  <div data-ng-repeat="column in objectAdmin.objectDefinition">
    <div data-ng-switch="column.type">
      <div data-ng-switch-when="string">
        <label class="label-plain" data-ng-bind-template="{{column.displayName}}"></label>
        <input type="text" data-ng-model="object[objectAdmin.name][column.name]" placeholder="{{displayName}}" title="{{displayName}}" name="textBox{{name}}" required />
      </div>
      <!--Call same object for child type as object. But how??? If i call <object> directive here then goes into infinite cycle -->
      <div data-ng-switch-when="object">
      </div>
    </div>
  </div>
</div>

控制器代码：

    var app = angular.module("myApp", []);

app.controller('ApplicationController', ['$scope',
  function($scope) {
    //Method to initialize 
    $scope.init = function() {
      //Set json data strucutre for editing 
      $scope.objectAdmin ={"name":"bankinfo","displayName":"Bank Info","type":"object","objectDefinition":[{"name":"name","displayName":"Bank Name","type":"string"},{"name":"mainPhone","displayName":"Main Phone","type":"string"},{"name":"contact","displayName":"Contact","type":"object","objectDefinition":[{"name":"name","displayName":"Name","type":"string"},{"name":"title","displayName":"Title","type":"string"}]}]};
      $scope.object={"bankinfo":{"name":"Chase Bank - Newburgh","mainPhone":"1 (845) 333-3333","contact":{"name":"Donna Shuler","title":"Commercial Accounts Mgr."}}};
    };

    //Call init() to initialze the loading.
    $scope.init();
  }
]);

的index.html

<!doctype html>
<html ng-app='myApp'>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="script.js"></script>
    <script src="ObjectEditor.js"></script>

  </head>
  <body data-ng-controller="ApplicationController">
<h2>How to call same directive within itself?</h2>
 <!--Use object editor directive to edit the object details -->
 <objecteditor data-object="object" data-object-admin="objectAdmin"></objecteditor>
  </body>
</html>

我想使我的指令通用，以便单指令可以支持相同类型的对象编辑。

当我试图在自己内部调用同一个指令时，它会陷入无限循环（这是预期的）。

如何在指令中实现此功能？请帮忙。

Answer 1

我正在阅读递归指令并发现以下帖子，这有助于实现我的要求。 https://www.packtpub.com/books/content/recursive-directives。以下是实现此目的的代码。对象编辑器指令模板：

<div>
    <objecttree data-object="object" data-object-admin="objectAdmin" data-folder-guid="folderGuid" data-hide-header="'true'"></objecttree>
    <script type="text/ng-template" id="objectTree">
    <div class="clear-left">
        <h4 data-ng-if="!hideHeader" data-ng-bind-template="{{objectAdmin.displayName}}"></h4>
        <div data-ng-repeat="column in objectAdmin.objectDefinition">
            <div data-ng-switch="column.type">            
                <imageeditor data-ng-switch-when="image" data-image="object[column.name]" data-folder-guid="folderGuid" data-column="column"></imageeditor>
                <formcheckbox data-ng-switch-when="boolean" data-input-value="object[column.name]" data-editable="column.editable" data-name="column.name" data-display-name="column.displayName" data-formName="'resourceAddEditFormName'"></formcheckbox>                                      
                <addresseditor data-ng-switch-when="address" data-address="object[column.name]" data-column="column" data-collection-admin="objectAdmin"></addresseditor>                        
                <formtextbox data-ng-switch-when="string" data-ng-if="!column.isDropdown" data-input-value="object[column.name]" data-editable="column.editable" data-name="column.name" data-display-name="column.displayName" data-formName="'resourceAddEditFormName'"></formtextbox>
                <dropdownbox data-ng-switch-when="string" data-ng-if="column.isDropdown" class="admin-textbox" data-selected-id-list="object[column.name]" data-dropdown="column" data-multiple="column.dropdownTypeMultiple"></dropdownbox>            
                <div data-ng-switch-when="object">
                    <hr/>                    
                    <objecttree data-object="object[column.name]" data-object-admin="column" data-folder-guid="folderGuid" data-hide-header="'true'"></objecttree>
                </div> 
                <div data-ng-switch-when="array">
                    <hr/>                    
                    <arrayobjecttree data-objects="object[column.name]" data-objects-admin="column" data-folder-guid="folderGuid" data-hide-header="'true'"></arrayobjecttree>
                </div>                 
            </div>        
        </div>    
    </div>    
    </script>    
</div>

对象树：

app.directive("objecttree", ['$compile', '$templateCache', function ($compile, $templateCache) {
        return {
            restrict: "E",
            scope: {
                object: '=',
                objectAdmin: '=',
                folderGuid: '=',
                hideHeader: '='
            },
            link: function (scope, element, attrs) {
                element.replaceWith(
                        $compile(
                                $templateCache.get('objectTree')
                                )(scope)
                        );

            }
        };
    }]);

Answer 2

这是Shankar。您可以使用以下解决方案进行递归指令。请确认我是否能解决您的问题。如果没有，您可以告诉我。由于我无法在此粘贴我的整个代码，您可以在我的Github存储库中找到解决方案:(即gmssankar / myRepository / Recursive Directive）

https://github.com/gmssankar/myRepository/blob/master/Recursive%20Directive

在plunker中也可以在以下链接中找到代码： plnkr.co/edit/WrZekRS5AzfFJhQ2d3XK?p=preview

我无法在此处附加完整代码，因为它会限制行数。逻辑是：内部指令模板显示来自传递对象的银行名称，主要电话，联系人姓名和联系人标题。然后检查传递的对象是否具有对象定义（即子节点）。如果是，则使用ng-repeat提取每个孩子，并传递给同一个指令。问题在这里解决了。从Github或plnkr，您可以访问完整的代码。

Angularjs指令，从内部调用相同的指令

2 个答案: