角度事件“ng-click”绑定问题答案

【问题标题】：Angular event 'ng-click' binding issue角度事件“ng-click”绑定问题
【发布时间】：2016-03-15 21:21:51
【问题描述】：

我遇到了角度 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 按预期绑定到“内部按钮”）：

<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>

【问题讨论】：

第二个不在Parent 控制器范围内。 Angular 控制器范围仅适用于内部内容和自身
已更新，请检查...谢谢
你包含了 jQuery 吗？
直接 DOM 操作将不起作用。您将不得不使用 $compile 服务
$compile 也需要一个作用域。您应该绕过使用像 ng-if 或自定义指令这样的指令

标签： javascript jquery html angularjs

【解决方案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>

【讨论】：

我欢迎您的建议，实际上我的要求有点复杂，我们必须创建一个可以用作编辑器的部分，稍后我们将在其中添加 svg 文件。这一切都应该是动态的，因为用户将创建一个与 MS-paint 相同的自定义设计（但不是那么多：P）。

【解决方案2】：

不确定您为什么不想使用 $scope，因为 Angular 最终会在内部管理 $scope。这是使用 $rootScope 的 hack 方式

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));
     };
 };

【讨论】：

@pankajparkar 因为他想要
你要真看这个ng-learn.org/2014/01/Dom-Manipulations..we不是来指导不正确的OP，
感谢您的建议。你读过用户问题吗？您在评论部分看到我与用户的对话了吗？