Javascript Angularjs如何使用带参数的指令函数插入带有ng绑定的html元素

我的想法是动态地将带有ng绑定的html结构添加到现有的javasctript对象上。我们应该实现一个名为WorkflowManagementSystem的应用程序，用于管理公司的工作流。我们应该能够立即显示用户当时正在创建的工作流。用户应该可以选择创建并行分支，因此问题在于显示这些分支。另一个问题是这些并行分支中的块数不必相等。（例如，左分支为一个街区，右分支为三个街区）

现在它看起来像：

当它是平行的，它应该是：

我想将html结构bellow注入html视图

（此时结构bellow仅用于普通分支）。如果它是普通分支，它应该注入不同的html结构，如果它是并行的。当我调用

vm.addNormalDiv（vm.normalNum）时，它说：“vm.addNormalDiv不是一个函数”。我想我在控制器和指令中得到了不同的作用域，但我不知道如何解决它

我是angularjs的新手，不知道这是否是实现这个想法的正确方法。你能帮帮我吗

我有一个角度控制器，看起来像：

    (function () {
"use strict";

// Getting existing module
angular.module("app-workflow", [])
    .controller("workflowController", workflowController)
.directive("addDiv", function ($compile) {
    return {
        restrict: 'E',
        link: function (scope, elm, attrs) {
            scope.addNormalDiv = function (val) {
                elm.after($compile('<addDiv>'
                    + '<div ng-repeat="block in vm.normalBlocks['+val+']" class="form-group row block">'
                +'<div class="col-lg-6">'
                    +'<label class="control-label">Název bloku</label>'
                    +'<div>'
                        +'<span class="form-control">{{block.name}}</span>'
                    +'</div>'
                +'</div>'
                +'<div class="col-lg-6">'
                    +'<label class="control-label">Popis bloku</label>'
                    +'<div>'
                        +'<span class="form-control">{{block.description}}</span>'
                    +'</div>'
                +'</div>'
                +'<div class="col-lg-6">'
                    +'<label class="control-label">Výchozí uživatel</label>'
                    +'<div>'
                        +'<span class="form-control">{{block.worker.name}}</span>'
                    +'</div>'
                +'</div>'
                +'<div class="col-lg-6">'
                    +'<label class="control-label">Typ bloku</label>'
                    +'<div>'
                        +'<span class="form-control">{{block.blockType.name}}</span>'
                    +'</div>'
                +'</div>'
            +'</div>'
            + '</addDiv>')(scope));
            }
        }
    };
});


function workflowController() {
        var vm = this;
        vm.normalNum = 0;
       vm.addNormalDiv(vm.normalNum); 
    }
})(); 

（函数（）{
“严格使用”；
//获取现有模块
angular.module（“应用程序工作流”，[]）
.控制器（“workflowController”，workflowController）
.directive（“addDiv”，函数（$compile）{
返回{
限制：'E'，
链接：功能（范围、elm、属性）{
scope.addNormalDiv=函数（val）{
elm.之后（$compile（“”）
+ ''
+''
+“Název bloku”
+''
+“{block.name}”
+''
+''
+''
+“Popis bloku”
+''
+“{block.description}}”
+''
+''
+''
+“Výchozíuživatel”
+''
+“{block.worker.name}”
+''
+''
+''
+“典型的布鲁库”
+''
+“{block.blockType.name}”
+''
+''
+''
+“（范围））；
}
}
};
});
函数workflowController（）{
var vm=这个；
vm.normalNum=0；
vm.addNormalDiv（vm.normalNum）；
}
})(); 

和html视图：

<div ng-controller="workflowController as vm">
        <addDiv>

        </addDiv>
</div>