[英]Simple, AngularJS replacement directive
I created an Angular directive to provide a means of attaching an ng-if directive and erase the element, replacing it with its content. 我创建了一个Angular指令,以提供一种附加ng-if指令并擦除该元素(将其替换为其内容)的方法。 I think this should be much easier, possibly using transclusion, but I can't quite work it out.
我认为这应该容易得多,可能使用了包含,但是我不能完全解决。 How should I do this?
我应该怎么做?
angular.module('myApp', []).
directive('tyReplace', function () {
return {
restrict: 'A',
replace: true,
scope: { tyReplace: '@' },
link: function (scope, element) {
element.parent().text(scope.tyReplace);
}
}
});
Usage: 用法:
<td>
<div ty-replace="{{content}}" ng-if="condition"></div>
<ul ng-if="othercondition">
<li ng-repeat="item in items">{{item}}</li>
</ul>
</td>
I started adding additional display options within the <td>
, but we also allow certain cells to be edited by toggling the contenteditable
attribute. 我开始在
<td>
内添加其他显示选项,但我们也允许通过切换contenteditable
属性来编辑某些单元格。 This approach allows me to continue providing that option. 这种方法使我可以继续提供该选项。
EDIT 编辑
Very soon, I would like to be able to replace {{content}}
with something more complex, such as an <input type="text" /><input type="datetime" />
for text and date controls when editing. 很快,我希望能够用更复杂的
{{content}}
替换{{content}}
,例如在编辑时用于文本和日期控件的<input type="text" /><input type="datetime" />
。 The current solution won't work when I want more complex markup inside. 当我想要更复杂的标记时,当前的解决方案将无法工作。
UPDATED 更新
Using transclusion in your directive provides you with options for manipulating the DOM with access to the transcluded content in the compile/link function. 在指令中使用转置为您提供了用于操作DOM的选项,这些DOM可以访问编译/链接函数中的已转译内容。 There, you may use jqLite to overwrite the contents of the parent with the contents of the
clone
: 在那里,您可以使用jqLite将
clone
内容覆盖父对象的内容:
JavaScript: JavaScript的:
angular.module('myApp', [])
.controller('MyController', function($scope){
$scope.condition = true;
// $scope.othercondition = true;
$scope.items = [1, 2, 3, 4];
$scope.obj = {
name: ''
};
})
.directive('myDirective', function(){
return {
transclude: true,
replace: true,
template: '<div ng-transclude></div>',
compile: function(tElem, tAttrs, transclude) {
return {
pre: function(scope, element) {
transclude(scope, function(clone){
element.parent().empty().append(clone);
});
}
}
}
}
});
index.html: index.html的:
<td>
<div ng-if="condition" my-directive ><input type="text" ng-model="obj.name" /></div>
<ul ng-if="othercondition">
<li ng-repeat="item in items">{{item}}</li>
</ul>
</td>
I feel like such a goof. 我感觉像个傻瓜。 See this Plunker .
看到这个柱塞 。 Turns out I just wanted
ng-transclude
. 原来我只是想要
ng-transclude
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.