angularJS 为 inner transclude 元素设置 ngModel attr

angularJS set ngModel attr for inner transclude element

本文关键字：设置 ngModel attr 元素 transclude inner angularJS      更新时间：2023-09-26

我想ngModel属性设置为任何被排除为derective的元素。

我使用slot transcludes：' 

  transclude: {
            'editor': 'editorControl'
        },`

因此，在link方法中，我使用 jquery 将 ng-model 的属性添加到editor-control的子级。

问题是尽管该属性已添加到DOM ng-model并未绑定到组件(当我更改输入中的值时，模型值在范围内没有更改(

这是完整的代码：

    (function () {
    'use strict';
    var module = angular.module('nokia');
    module.directive('optionalEditor', function () {
        return {
            templateUrl: 'plugins/acc/app/common/optional-editor/optional-editor.html',
            restrict: 'E',
            require: '?ngModel',
            replace: true,
            transclude: {
                'editor': 'editorControl'
            },
            scope: true,
            link: function (scope, element, attrs, ngModelCtrl,transcludeFn) {
                scope.model = {};
                scope.model.viewValue = 'Not set';
                scope.model.beingEdited = false;
                if (ngModelCtrl) {
                    scope.toggleEditMode = function (doApply) {
                        if (scope.model.beingEdited) {
                            if (doApply) {
                                ngModelCtrl.$setViewValue(scope.model.editValue);
                            }
                        } else {
                            scope.model.editValue = ngModelCtrl.$viewValue;
                        }
                        scope.model.beingEdited = !scope.model.beingEdited;
                    };
                    ngModelCtrl.$render = function () {
                        scope.model.viewValue = this.$viewValue ? this.$viewValue : 'Not set';
                    };
                }
                transcludeFn(scope, function (clone, sc) {
                var eControl = clone.children();
                eControl.attr("ng-model", "model.editValue");
                element.find('editor-control').replaceWith(clone);
            });
            }
        }
    });
})(window);

模板：

<div>
<a ng-show="!model.beingEdited" ng-click="toggleEditMode()" href>{{model.viewValue}}</a>
<div ng-show="model.beingEdited">
    <div class="row">
        <div class="col-xs-8">
            <ng-transclude ng-transclude-slot="editor"></ng-transclude>
        </div>
        <button type="button" class="btn btn-primary" title="Apply" ng-click="toggleEditMode(true)"><i
                class="fa fa-check"></i>
        </button>
        <button type="button" class="btn btn-default" title="Cancel" ng-click="toggleEditMode(false)"><i
                class="fa fa-ban"></i>
        </button>
    </div>
</div>

用法：

 <optional-editor ng-model="parameter.value" class="col-sm-6">
    <editor-control>
     <input class="form-control" type="number" id="{{metaDs.id}}" placeholder="integer value">
   </editor-control>
 </optional-editor>

我想input ngModel绑定到指令范围内的值。也许有人可以建议如何做到这一点？

我认为您正在寻找的是指令link函数中引入的transcludeFn回调。这允许您为包含的内容指定范围，这意味着您可以向包含内容中的元素添加 ng-model 属性，并且仍然通过指令的范围访问它。

下面是如何执行此操作的示例：

在要包含的标记中： 

<input type="number" ... ng-model="ngModel">

在包含指令中：

...
link: function (scope, element, attrs, ngModelCtrl, transclude) {
...
  // this function applies the scope in it's first parameter to the 
  // transcluded markup, clone is the transcluded content
  transclude(scope, function(clone, scope) {
    // append the transclude content to your directive's element, 
    // or any other element you choose
    element.append(clone);
  }

使用 transcludeFn 是必需的，因为默认情况下，您的 transclude 内容将使用父控制器的作用域，并且您无法直接在指令中修改它。

更新 - 动态 NG 模型

要动态地将 ng-model 属性添加到指令中，您需要将该属性添加到 transclude 函数中的 clone 元素并对其进行编译： 

transclude(scope, function(clone, scope) {
  var target = angular.element( document.querySelector('#transclude-contents') );
  clone.attr('ng-model', 'ng-model');
  $compile(clone)(scope);
  target.append(clone);
});

以下是更新的PLNKR：http://plnkr.co/edit/WKX8562vD0OvokR6Mujv?p=preview

相关文章：