我想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