如何将 ng-click 绑定到插入指令嵌入 HTML 块内的 HTML 块

Question

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

我有一个 ng-click="switchCurreny() 函数，我正在尝试处理一个 HTML 块，该块放置在另一个 HTML 块内，该块嵌入在我的 directive 的页面上。

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

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

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

Answer 1

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

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

这是上面链接的摘录（如果链接失效），它显示了它应该是什么样子：

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