How to bind ng-click to a HTML block inserted insi

问题:

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>

回答1:

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