在AngularJS中动态添加指令

发布时间：2020-12-17 09:30:22 所属栏目：安全来源：网络整理

导读：我有一个非常沸腾的版本，我正在做，得到的问题。我有一个简单的指令。每当你点击一个元素，它会添加一个。但是，它需要首先编译为了正确地呈现它。我的研究使我得到了$ compile。但所有的例子使用一个复杂的结构，我真的不知道如何应用这里。 Fiddles在这

我有一个非常沸腾的版本，我正在做，得到的问题。

我有一个简单的指令。每当你点击一个元素，它会添加一个。但是，它需要首先编译为了正确地呈现它。

我的研究使我得到了$ compile。但所有的例子使用一个复杂的结构，我真的不知道如何应用这里。

Fiddles在这里：http://jsfiddle.net/paulocoelho/fBjbP/1/

JS在这里：

var module = angular.module('testApp',[])
    .directive('test',function () {
    return {
        restrict: 'E',template: '<p>{{text}}</p>',scope: {
            text: '@text'
        },link:function(scope,element){
            $( element ).click(function(){
                // TODO: This does not do what it's supposed to :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

解决方案：Josh David Miller：
http://jsfiddle.net/paulocoelho/fBjbP/2/

你有很多无意义的jQuery在那里，但$ compile服务实际上是超级简单在这种情况下：

.directive( 'test',function ( $compile ) {
  return {
    restrict: 'E',scope: { text: '@' },template: '<p ng-click="add()">{{text}}</p>',controller: function ( $scope,$element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

你会注意到我重构了你的指令，以便遵循一些最佳实践。如果您对这些问题有任何疑问，请与我们联系。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!