Question

我有一个孤立的指令作为元素

如果返回html被覆盖，我如何绑定它的ngmodel？

&lt;div ng-repeat="x in list"&gt;
    &lt;form-element ng-model="value[x.name]"&gt;&lt;/form-element&gt;
&lt;/div&gt;

我在添加ngmodel时遇到了麻烦

JS：

app.directive('formElement', function($compile) {
    return {
        restrict: 'E',
        scope   : {
            type : '=' 
            } ,
        link : function(scope, element, attrs) {
                scope.$watch(function () {                      
                        return scope.type ;
                }, function() {
                    var templates           = {};

                    templates['text']       = '&lt;input type ="text" name="{{name}}"&gt;' ;
                    templates['radio']      = '&lt;input ng-repeat="option in optionsList" name="{{name}}" type="radio"&gt;';


                    if (templates[inputType]) {
                        scope.optionsList   = scope.type.data;
                        scope.name          = scope.type.name;

                        element.html(templates[scope.type.inputType]);
                    } else {
                        element.html("");
                    }
                    $compile(element.contents())(scope);
                }

                );  
            }   
        } 
});

提前致谢

Answer 1

如果您希望在指令创建的字段中引入ng-model，您可以将ngModel注入隔离范围内。

<强>标记

<div ng-repeat="x in list">
    <form-element ng-model="x.value" type="x.inputType"></form-element>
</div>

<强>指令

app.directive('formElement', function($compile) {
  return {
    restrict: 'E',
    scope: {
      type: '=',
      ngModel: '='
    },
    link: function(scope, element, attrs) {
        var templates = {};
        templates['text'] = '<input type ="text" name="{{name}}" ng-model="ngModel">';
        templates['radio'] = '<input ng-repeat="option in optionsList" name="{{name}}" type="radio">';
        if (templates[scope.type]) {
          scope.optionsList = scope.type.data;
          scope.name = scope.type.name;
          element.append($compile(templates[scope.type])(scope));
        } else {
          element.html("");
        }
        //$compile(element.contents())(scope);
    }
  }
});

Demo Plunkr

Answer 2

您正在做的是调用隔离范围的属性＆＃34; ngModel＆＃34;，但您没有使用ngModelController。这并不意味着您正在使用Angular提供的ngModel指令。

您可以在指令的任何其他名称中更改ngModel属性的名称，它应该可以正常工作。

使用ngModel表示您添加了要求：＆＃39; ngModel＆＃39;＆＃34;支柱。在你的指令对象中。

scp

并在链接函数中使用ngModelController访问$ viewValue

git bash

这里有更多信息。 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

带有隔离范围指令的ng-model

2 个答案: