如何将 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=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>
我认为你基本上必须在插入新的 html 代码后重新编译,因为据我所知 angular 只是将新代码插入你的 div 而不是'编译它。
在我看来,正确的方法是创建一个指令来处理您的重新编译。此处讨论了一种可能的解决方案:http://jesusjzp.github.io/blog/2014/07/30/compile-ngbind-angularjs/
这是上面 link 的摘录(如果 link 永远死了),显示它应该是什么样子:
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);
}
};
}]);
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>
我认为你基本上必须在插入新的 html 代码后重新编译,因为据我所知 angular 只是将新代码插入你的 div 而不是'编译它。
在我看来,正确的方法是创建一个指令来处理您的重新编译。此处讨论了一种可能的解决方案:http://jesusjzp.github.io/blog/2014/07/30/compile-ngbind-angularjs/
这是上面 link 的摘录(如果 link 永远死了),显示它应该是什么样子:
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);
}
};
}]);