javascript - angularjs - 在运行时创建指令实例？

Question

我正在开发一个 formbuilder，并希望能够在运行时动态创建我的指令的实例。

除了渲染之外，我的所有功能都可以正常工作。我可以通过 $compile 呈现一个实例，但是当我尝试在指令中添加一些内部功能时，它没有解析绑定(bind)？

我的指令

.directive('formElType', function ($compile) {
    var txt_label = 'Please type your text here';

    return {
        restrict: 'E',
        replace: true,
        scope: {
            txt_label: '=',
        },
        template: '<div class="fbuild-playground-el-wrap" ng-click="openSettings($event)">' +
                    '<div class="fbuild-playground-el">' +
                        '<p>{{ txt_label }}</p>' +
                    '</div>' +
                '</div>',
        link: function (scope, elem, attrs) {
            scope.txt_label = txt_label;

            $compile(elem.contents())(scope);
        }
    };
});

呈现指令的 Javascript 代码

$scope.componentDrop = function(e) {
    angular.element(
        $compile('<form-el-type></form-el-type>')()
    ).appendTo($scope.comp_dropzone);
};

Answer 1

在深入研究指令的呈现方式后，我找到了自己问题的解决方案。

因为编译是在链接/ Controller 函数执行之前完成的，所以值直到下一个 Angular 渲染器周期才会更新。

有覆盖形式的scope.$apply();

所以我需要做的就是

link: function (scope, elem, attrs) {
    scope.txt_label = txt_label;

    scope.$apply();
}

如果你们中的任何人想了解更多这方面的信息，我建议您阅读:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html :]