角度事件'ng-click'绑定问题

Question

我有问题角度ng-Click。

我的控制器

var ParentController = function () { 

    this.MyEvent = function() { 
     alert('foo-bar'); 
    }; 

    this.AddHTML= function() { 
     $("#ButtonSec").html('<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>'); 
    }; 
}; 

angular.module('myApp', []).controller('ParentController', ParentController); 

HTML - 1（按预期工作按钮纳克点击绑定到作为预期 '内按钮'）：

<div ng-app='testComponent'> 
    <div id="content" ng-controller="ParentController as Parent"> 
     <div id="ButtonSec"> 
      <input type='button' ng-click='Parent.MyEvent()' value='inner button'/> 
     </div> 
    </div> 
</div> 

HTML-2（不工作）：当使用添加HTML按钮呈现HTML。事件不绑定到内按钮应该（重要的事情，我不能用$范围根据客户要求）

<div ng-app='testComponent'> 
    <div id="content" ng-controller="ParentController as Parent"> 
     <div id="ButtonSec"> 

     </div> 
     <input type='button' ng-click='Parent.AddHTML()' value='Add HTML'/> 
    </div> 
</div> 

Answer 1

我建议你使用ng-if指令，它会增加或在Expression删除HTML中我们会提供给它。要显示隐藏该div，您需要在控制器上下文中维护一个变量，该变量将负责在html上显示div。

的Html

<div ng-app='testComponent'> 
    <div id="content" ng-controller="ParentController as Parent"> 
     <div ng-if="Parent.showContent" id="ButtonSec"> 
      <input type='button' ng-click='Parent.MyEvent()' value='inner button'/> 
     </div> 
     <input type='button' ng-click='Parent.showContent = true' value='Add HTML'/> 
    </div> 
</div> 

Answer 2

不知道为什么你不想使用$范围，因为角度管理最终内部$范围。这是破解方式使用$ rootScope

var ParentController = function ($compile,$rootScope) { 

    this.MyEvent = function() { 
     alert('foo-bar'); 
    }; 

    this.AddHTML= function() { 
    $("#ButtonSec").html($compile("<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>")($rootScope.$$childHead)); 
    }; 
};