Question

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

除渲染外，我已经完成了所有功能。我可以通过$ compile渲染一个实例，但是当我尝试在指令中添加一些内部功能时，它不会解析绑定吗？

我的指示

.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

在深入研究指令的渲染方式后，我找到了解决自己问题的方法。

因为编译是在执行链接/控制器功能之前完成的，所以在下一个angular的渲染器循环之前，这些值不会更新。

以范围的形式存在覆盖。$ apply（）;

所以我需要做的就是

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

    scope.$apply();
}

如果您想了解更多相关信息，建议您阅读：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html：]

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

1 个答案: