javascript - 更新 Controller 变量更改指令创建的元素

标签 javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

我正在尝试创建一个 Angular 应用程序,用户可以在其中创建动态表单。在此用户可以创建表单字段并保存表单元数据,然后用于显示实际表单。有实时预览,它使用指令创建元素。

由于我是 Angular 的新手,我无法弄清楚为什么绑定(bind)不起作用以及我需要进行哪些更改才能使其起作用。我在这里需要的是,一旦上述数据发生变化,实时预览部分就应该更新。比如说,我将类型从文本更改为密码,实时预览中的输入框应该变成密码类型。以下代码是主应用程序的片段。不幸的是,我无法更改 Angular 版本。

HTML

<form ng-submit="">
    <div ng-repeat="tagfield in tagfields">
        <dynamic-form dataobject="tagfield"></dynamic-form>
    </div>
    <button type="reset">Reset</button>
    <button type="submit">Submit</button>
</form>

脚本

app.directive('dynamicForm', [ '$rootScope', function($rootScope){
    return{
        restrict: 'E',
        scope: {
            dataObject:'=dataobject'
        },
        link: function(scope, element, attrs){
            element.append(
                    'Sample directive ' + scope.dataObject.selectmodel
                    + '<input type='+scope.selectmodel+' 
                       ng-model='+scope.dataObject.idmodel+'>'
            );
        }
    }

}]);

plunker中的详细代码

https://embed.plnkr.co/7jBm9vxSx3y1hCCwjy1w/

最佳答案

请在 plunker 中尝试以下代码,如果有效请告诉我

app.directive('dynamicForm', [ '$compile', function($compile){
return{
    restrict: 'E',
    scope: {
        dataObject:'=dataobject'
    },
    link: function(scope, element, attrs){

        var el  ="Sample directive <span>" + scope.dataObject.selectmodel
                + "</span><input type="+scope.dataObject.selectmodel+ "ng-value="+scope.dataObject.idmodel+"/>";
        element.append(el);
        scope.$watch('dataObject.selectmodel',function(newvalue,oldvalue){

        if(oldvalue !=newvalue)
         addelement(newvalue);
        },true)

        function addelement(valuedata)
        {
               element.children().remove()
                var el  ="Sample directive <span>" +             scope.dataObject.selectmodel
                + "<span>"+"<input type='"+valuedata+ "'ng-value='"+scope.dataObject.idmodel+"'/>'";
        element.append($compile(el)(scope));

        }
    }
}

}]);

关于javascript - 更新 Controller 变量更改指令创建的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42091799/

相关文章:

angularjs - 如何使用 ngmodel 在 datetimepicker 中设置默认日期?

javascript - 在指令中使用相同的指令 [angularjs]

javascript - 在 Node.js 中的函数和 JavaScript 文件之间隐式传递上下文

javascript - 如何单击重定向页面上的按钮?

javascript - 如何不断检查 div 的类

angularjs - Shibboleth SSO CORS 错误

javascript - 使用 Angular js自动滚动到第一个空白必填字段

javascript - 选中复选框后滚动到顶部

javascript - AngularJs 使用指令中的输入字段验证表单

javascript - Bootstrap 日期时间选择器上的小字体