[英]ng-click not working in AngularJS
我有以下兩個指令。 第一個(recentisls)創建第二個“ issuedesc”
directive('recentisls', function ($compile) {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function ($scope, $element) {
$scope.showIsDsc = function () {
var el = $compile("<issuedesc></issuedesc>")($scope);
$('body').html(el);
},
template: '<div ng-click="showIsDsc()"></div>',
};
}).
directive('issuedesc', function ($compile) {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function ($scope, $element) {
$scope.addcomts = function () {
alert("A Hello");
};
},
template: '<input ng-click="addcomts()" type="button" value="Submit Comments"/>,
replace: true
};
})
HTML代碼-
<body>
<issuedesc></issuedesc>
</body>
在瀏覽器中,當我們單擊從issueesc創建的按鈕時,以上方法起作用。
但,
<body>
<recentisls></recentisls>
</body>
在瀏覽器中,當我們單擊從最新版本創建的按鈕時,以上方法不起作用。
語法錯誤很少
app.directive('recentisls', function ($compile) {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function ($scope, $element) {
$scope.showIsDsc = function () {
var el = $("<issuedesc></issuedesc>").appendTo('body');
$compile(el)($scope)
};
},
template: '<div ng-click="showIsDsc()">dd</div>'
}
}).directive('issuedesc', function ($compile) {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function ($scope, $element) {
$scope.addcomts = function () {
alert("A Hello");
};
},
template: '<input ng-click="addcomts()" type="button" value="Submit Comments"/>',
replace: true
};
});
演示: 小提琴
控制器不是使用$ compile和操作DOM的正確位置。 這應該在鏈接功能中完成。 在您的情況下,您甚至不需要真正進行編譯。 您可以將ng-if合並到模板中:
<div ng-if="!issueDescriptionVisible" ng-click="showIsDsc()"></div>
<issuedesc ng-if="issueDescriptionVisible"></issuedesc>
那么您的點擊處理程序將執行以下操作:
$scope.showIsDsc = function() {
$scope.issueDescriptionVisible = true;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.