如何绑定NG单击插入指令嵌入HTML块内部的HTML块 [英] How to bind ng-click to a HTML block inserted inside of a directive embedded HTML block

问题描述

Plnkr： http://plnkr.co/编辑/ 6xe46opL2kpgQrf7VaE​​u？p = preVIEW

我有我试图让工作被放置HTML的另一个块内的HTML块上 NG-点击=switchCurreny（）功能嵌入在页面上从我的指令。

这将HTML的另一块到指令放在HTML我的程序 - 主控制器，还包含了 NG-点击函数我试图让工作：

  VAR应用= angular.module（'APP-主'，['ngAnimate'，'钱包指令']）
.controller（'MainCtrl'，['$范围，$ SCE'，函数（$范围，$ SCE）{    VAR VM = $范围;
    VAR货币='美元';
    vm.modal = FALSE;
    vm.modal_send = FALSE;
    vm.modalActive = FALSE;    钱包模态＆GT; // HTML到上述＆lt放在HTML内放置指示的;
    VAR send_html ='＆LT; D​​IV NG点击=switchCurreny（）级=btn_usd noselect＆GT;'+货币+'＆LT; / DIV＆GT;';    //打开模式，然后将send_html到modal_bind：
    vm.openModal =功能（$事件）{
        vm.modal = TRUE; //显示模式
        vm.modal_send = TRUE; //显示modal_send
        vm.modal_bind = $ sce.trustAsHtml（send_html）; // send_html坚持modal_bindd内
    }    vm.closeModal =功能（）{
        vm.modal = FALSE;
        vm.modal_send = FALSE;
    };    send_html内// NG单击功能：
    vm.switchCurreny =功能（）{
        的console.log（点击）;
        如果（货币==='美元'）{
            货币=BTC;
        }其他{
            货币==='美元';
        }
    };
}]）;
 

我的指令与HTML模式

 （函数（）{    VAR应用= angular.module（'钱包指令，[]）
    .directive（'walletModals'，函数（）{        返回{
            限制：'E'，
            模板：'＆LT; D​​IV NG秀=modal_send级=模式＆GT;＆LT; P＆GT;下面的模态，按钮：LT; / P＆GT;＆LT; BR /＆GT;＆LT; D​​IV NG绑定，HTML = modal_bind＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;'
        };
    }）;}）（）;
 

HTML

 ＆LT;！ - 指令放在这里 - ＆GT;
＆LT;钱包情态动词＆GT;＆LT; /钱包情态动词＆GT;
 

解决方案

我觉得你基本上要重新编译您插入新的HTML code之后，由于角度刚刚插入新的code到您的div远按照我的理解，不对其进行编译。

在我看来，像正确的方法是创建一个处理您重新编译指令。一个可能的解决方案已经在这里讨论：的http：// jesusjzp。 github.io/blog/2014/07/30/compile-ngbind-angularjs/

下面是从上面的链接的摘录（如果该链接是永远不会死）的说明它是如何应该是这样的：

  HTML：＆LT; D​​IV NG绑定-HTML =细节做编译=范围＆GT;＆LT; / DIV＆GT;JS：angular.module（'yourAppName'）
  .directive（'doCompile'，['$编译，函数（$编译）{
    返回功能（范围，元素，ATTRS）{
      VAR selectedScope = attrs.doCompile＆放大器;＆安培;范围$的eval（attrs.doCompile）。
      如果（！element.hasClass（'编译'））{
        element.addClass（'编译'）;
        编译（element.contents（））（selectedScope ||范围内）;
      }
    };
}]）;
 

Plnkr: http://plnkr.co/edit/6xe46opL2kpgQrf7VaEu?p=preview

I have a ng-click="switchCurreny() function that I'm trying to get working on an block of HTML that is placed inside of another block of HTML that is embedded on the page from my directive.

My app-main controller that places another block of HTML into the directive placed HTML, also contains the ng-click function I'm trying to get working:

var app = angular.module('app-main', ['ngAnimate', 'wallet-directives'])
.controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) {

    var vm = $scope;
    var currency = 'USD';
    vm.modal = false;
    vm.modal_send = false;
    vm.modalActive = false;

    // HTML to be placed inside of directive placed HTML in <wallet-modals>
    var send_html = '<div ng-click="switchCurreny()" class="btn_usd noselect">'+currency+'</div>';

    // Open the modal, then place send_html into modal_bind:
    vm.openModal = function($event) {
        vm.modal = true;                             // show modal
        vm.modal_send = true;                        // show modal_send 
        vm.modal_bind = $sce.trustAsHtml(send_html); // stick send_html inside of modal_bindd
    }

    vm.closeModal = function() {
        vm.modal = false;
        vm.modal_send = false;
    };

    // ng-click function inside of send_html:
    vm.switchCurreny = function() {
        console.log('clicked');
        if (currency === 'USD') {
            currency = 'BTC';
        } else {
            currency === 'USD';
        }
    };
}]);

My Directive with the Modal HTML

(function() {

    var app = angular.module('wallet-directives', [])
    .directive('walletModals', function () {

        return {
            restrict: 'E',
            template: '<div ng-show="modal_send" class="modal"><p>The Modal, button below:</p><br/><div ng-bind-html="modal_bind"></div></div>'
        };
    });

})();

HTML

<!-- Directive goes here -->
<wallet-modals></wallet-modals>

解决方案

I think you basically have to recompile after you have inserted new html code, because angular just inserts the new code into your div as far as I understand it and doesn't compile it.

It seems to me like the proper way would be to create a directive that handles your recompile. A possible solution has been discussed here: http://jesusjzp.github.io/blog/2014/07/30/compile-ngbind-angularjs/

Here is an excerpt from the link above (if the link ever dies) that shows how it is supposed to look like:

HTML:

<div ng-bind-html="details" do-compile="scope"></div>

JS:

angular.module('yourAppName')
  .directive('doCompile', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
      var selectedScope = attrs.doCompile && scope.$eval(attrs.doCompile);
      if (!element.hasClass('compiled')) {
        element.addClass('compiled');
        compile(element.contents())(selectedScope || scope);
      }
    };
}]);

这篇关于如何绑定NG单击插入指令嵌入HTML块内部的HTML块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！