自定义指令中的双向绑定与ng-repeat

时间:2017-03-21 06:10:56

标签: angularjs angularjs-directive angularjs-scope

我基本上有一个存储为对象数组的项目列表。其中一些是其他人的“孩子”。这由每个对象中的“parentid”设置表示。这只意味着我想将子项显示为父项中的嵌套列表。

所以,我开始迭代数组并找到一个没有父数组的数组。当我找到它时,我调用一个指令来获取该ID,然后再次遍历主数组并找到其parentID与相关的ID相同的任何项目并显示它。可以有多个级别的子级,以便递归调用该指令。

这样可以正常显示并显示所有子项,但我希望能够选择这些项中的任何一项并在顶层查看该ID或对象。这不起作用。我通过双向绑定将变量传递给每个指令,但是没有更新父节点。我理解原始问题,我正在传递一个对象,但这不起作用。我认为我需要对重复做一些事情,但我不确定是什么。我不认为转换是个问题。

在下面的演示中,每当我点击一个项目时,我都需要显示更新的var3变量。

初始HTML

<div>{{var3}}</div>
<div>
    <my-directive var1="item1"
                  var2="item2"
                  var3="item3">
    </my-directive>
</div>

指令

(function ()
{
    'use strict';

    angular
        .module('app.core')
        .directive('myDirective', myDirective);

    function structureContent($templateRequest, $compile)
    {   return {
            restrict : 'E',

            scope:{
                var1:'=',
                var2:'@',
                var3:'='
            },

            controller : ["$scope", "$element", "$attrs",

                function($scope, $element, $attrs) {

                }
            ],

            link : function(scope, element, attrs){

                scope.$watch('worksheet', 

                    function(){

                        $templateRequest("myTemplate.html").then(function(html){
                            var template = angular.element(html);
                            element.html(template);
                            $compile(template)(scope);
                        });

                    }, true 
                );
            }
        }
    }; 
})();

指令HTML

<div>
    <div ng-click="var3=thisItem.itemid;">(Display  item)    </div>
    // var3 is what I want to be able to pull out at the top level
</div>


<div ng-repeat="thisObj in myArray | orderBy:'order' track by thisObj.itemid" 
    ng-switch on="thisObj.type_id" 
    ng-if="thisObj.content.parentid==thisItem.itemid" 
    class="subSection" >


    <div ng-switch-when="1">
        <my-directive var1="{{var1}}"
                         var2="var2"
                         var3="var3">
        </my-directive>
    </div>

</div>

0 个答案:

没有答案