Question

我有一个指令，其中包含一个文本框和一个按钮，用于将同一指令的另一个实例添加到页面上。

主控制器中的ngModel I＆m; m设置是我希望所有实例与每个新指令一起使用的模型，在新实例添加到页面之前在模型对象上创建新属性。

以编程方式添加指令工作正常，但我似乎无法像我期望的那样使数据绑定工作。要么所有文本框都具有相同的值，要么根本不更新模型。

angular.module('app')
.directive('myTextBox', function ($compile) {
return {
    templateUrl: 'directive.tpl.html',
    restrict: 'E',
    scope: {
        myModel: '=ngModel'
    },
    link: function postLink(scope, element, attrs) {

        var propertyId = 0,
            propertyName = 'TextBox';

        scope.model = attrs.ngModel;
        propertyId = attrs.ngModelPropertyId;
        scope.modelPropName = attrs.ngModelPropertyName + propertyId;

        scope.value = scope.subscription.value;


        scope.add = function(){

            var newTextBox,
                propName = propertyName + (parseInt(propertyId, 10) +1);

            newTextBox = angular.element(document.createElement('my-text-box'));


            Object.defineProperty(scope.myModel, propName, {
                enumerable: true,
                configurable: false,
                writable: true,
                value: ''
            });

            newTextBox.attr('ng-model', 'myModel');
            newTextBox.attr('ng-model-property-name', propertyName);
            newTextBox.attr('ng-model-property-id', propertyId);

            el = $compile(newTextBox)(scope);

            angular.element(document.getElementById('elholder')).append(newTextBox);

            scope.insertHere = el;

        };

  }
};
});

我是否误解了如何正确地做到这一点，或者我从根本上误解了正确的架构方式。

我已经在http://plnkr.co/edit/PXpzVnJc4gMpbuYaPsVn创建了一个Plnkr，感谢任何帮助。

以编程方式从XYZ指令中添加另一个XYZ指令实例

0 个答案: