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

问题描述

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

我有一个 ng-click="switchCurreny() 函数，我正在尝试处理一个 HTML 块，该块位于嵌入页面的另一个 HTML 块内来自我的指令.

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.

我的 app-main 控制器将另一个 HTML 块放入放置的 HTML 指令中，还包含我正在尝试使用的 ng-click 函数:

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

我的模态 HTML 指令

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>

推荐答案

我认为你插入新的 html 代码后基本上必须重新编译，因为据我所知，angular 只是将新代码插入到你的 div 中，并没有不要编译它.

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.

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

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-click 绑定到插入指令嵌入 HTML 块内的 HTML 块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！