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（按预期工作按钮ng-click绑定到＆＃39;内部按钮＆＃39;按预期方式）：

<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时。事件没有绑定到内部按钮应该（重要的是我可以根据客户要求使用$ scope）

<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

不确定为什么你不想使用$ scope，因为角度最终会在内部管理$ scope。这是使用$ 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));
     };
 };

角度事件＆＃39; ng-click＆＃39;约束问题

2 个答案: