Javascript 在控制器变量更改时更新由指令创建的元素

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

由于我是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+'>'
            );
        }
    }

}]);

app.directive（'dynamicForm'，['$rootScope'，function（$rootScope）{
返回{
限制：'E'，
范围：{
数据对象：'=dataObject'
},
链接：函数（范围、元素、属性）{
元素.append(
“示例指令”+scope.dataObject.selectmodel
+ ''
);
}
}
}]);

plunker中的详细代码

---

请在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));

        }
    }
}

}]);

app.directive（'dynamicForm'，['$compile'，function（$compile）{
返回{
限制：'E'，
范围：{
数据对象：'=dataObject'
},
链接：函数（范围、元素、属性）{
var el=“Sample directive”+scope.dataObject.selectmodel
+ "";
元素。追加（el）；
作用域.$watch（'dataObject.selectmodel'，函数（newvalue，oldvalue）{
如果（旧值！=新值）
加法（新值）；
}，对）
函数加法器（valuedata）
{
element.children（）.remove（）
var el=“Sample directive”+scope.dataObject.selectmodel
+ ""+"'";
追加（$compile（el）（scope））；
}
}
}
}]);

添加了jquery库，该代码开始工作。只需要知道哪里需要jquery。有没有纯角度的方法？为什么以前绑定不起作用？