Question

我试图从指令链接函数追加div但没有任何反应。

这是一个小代码片段。因此我是棱角分明的新人。所以无法捕获代码中的错误。请告诉我我犯了哪个错误。

var app = angular.module("myApp", []);

app.directive('busyBox',function(){
     return  {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(){
            if(attrs.id=='btnadd')
            {
               element.parent().parent().find('.parent').append('<div>Some text</div>')
                //element.closest('.parent').append('<div class="child">child</div>')
              //angular.element(document).find('.parent').append('<div class="child">child</div>');
            }
            else if(attrs.id=='btnDel')
            {
                alert('clicked del btn');
            }
          }); 

        }
        }
})

jsfiddle link https://jsfiddle.net/tridip/4o1zkbj1/3/

Answer 1

尝试使用querySelector。

＆＃13;

var app = angular.module("myApp", []);

app.directive('busyBox',function(){
     return  {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.on('click', function(){
            if(attrs.id=='btnadd')
            {
         
              var divElement = angular.element(document.querySelector('.parent')).append('<div class="child">Some text</div>');
        //     console.log(divElement);
             //  element.parent().find('.parent').append('<div>Some text</div>')
            	//element.closest('.parent').append('<div class="child">child</div>')
              //angular.element(document).find('.parent').append('<div class="child">child</div>');
            }
            else if(attrs.id=='btnDel')
            {
            document.body.querySelector('.child').remove();
           //    m.removeChild(m.firstChild);
            }
          }); 
          
        }
        }
})

＆＃13;

.parent { 
  width: 200px;
  height: 200px; 
  background-color:red;
  position: relative;
}

.child {
    height: 100px;
    width: 100px;
    background-color:yellow;
    position: absolute
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="myApp">
<div id="dvParent" class="parent">parent div
    
</div>
<br>
<button id="btnadd" busy-box>Add Div</button>
<button id="btnDel" busy-box>Remove Div</button>
</div>

＆＃13;

AngularJS：从指令动态追加子div

1 个答案: