1

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

私ng-click="switchCurreny()のdirective.

app-mainHTML を配置したディレクティブに 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>
4

1 に答える 1

0

angularは、私が理解している限り、新しいコードをdivに挿入するだけでコンパイルしないため、基本的に新しいhtmlコードを挿入した後に再コンパイルする必要があると思います。

再コンパイルを処理するディレクティブを作成するのが適切な方法のように思えます。可能な解決策がここで議論されています: 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);
      }
    };
}]);
于 2015-01-24T21:02:19.387 に答える