我看不出 ng-click
不起作用的明显原因,但是当单击它绑定(bind)到的元素时它不会触发。
将呈现两个元素。每个 div 的右上角都有一个图标 X,它应该触发 deletePreview
。目前,这将导致 linkPreviews
的第一项被删除。例如,当通过 $timeout
调用此方法时,它会按预期工作。但是尝试单击该图标不起作用。
我很高兴有任何想法。
(function (angular) {
'use strict';
angular
.module('commons.ui')
.directive('linkPreview', linkPreview)
.controller('LinkPreviewController', LinkPreviewController);
function linkPreview() {
return {
restrict: 'E',
replace: true,
templateUrl: 'link-preview/link-preview.html',
scope: {},
require: 'ngModel',
bindToController: {
focusVar: '=?',
placement: '@'
},
controller: 'LinkPreviewController',
controllerAs: '$ctrl'
};
}
function LinkPreviewController($log, $timeout) {
var vm = this;
vm.deletePreview = deletePreview;
vm.linkPreviews = [
{
image: {
fileId: 'f616157b-223d-46ff-ba87-c16d10e83ed6',
senderId: '1ae6f889-f27e-4466-a0a9-021923704097'
},
title: 'Title',
description: 'This is an integrated platform for your official company news, social collaboration and team messaging.',
url: 'http://www.sample.com/en/tour',
tld: 'sample.com'
},
{
image: '',
title: 'Hacker News',
description: 'News for the technically interested',
url: 'https://news.ycombinator.com/',
tld: 'news.ycombinator.com'
}
];
function deletePreview() {
$log.info('should be deleted');
vm.linkPreviews.splice(0, 1);
}
}
})(angular);
<div ng-repeat="linkPreview in $ctrl.linkPreviews">
<div class="link-preview">
<div class="link-preview-delete pull-right">
<div class="link-preview-delete pull-right">
<span class="link-preview-delete-button" ng-click="$ctrl.deletePreview()">
<i class="zmdi zmdi-close img-close"></i>
</span>
</div>
</div>
..
</div>
</div>
最佳答案
您需要将空依赖项
添加到您的模块中,例如:
angular.module('commons.ui', [])
并且,必须在 HTML 中使用 controller as
语法(如果未使用),例如:
ng-controller="LinkPreviewController as $ctrl"
工作演示:
angular
.module('commons.ui', [])
.directive('coyoLinkPreview', linkPreview)
.controller('LinkPreviewController', LinkPreviewController);
function linkPreview() {
return {
restrict: 'E',
replace: true,
templateUrl: 'app/commons/ui/components/link-preview/link-preview.html',
scope: {},
require: 'ngModel',
bindToController: {
focusVar: '=?',
placement: '@'
},
controller: 'LinkPreviewController',
controllerAs: '$ctrl'
};
}
function LinkPreviewController($log, $timeout) {
var vm = this;
vm.deletePreview = deletePreview;
vm.linkPreviews = [{
image: {
fileId: 'f616157b-223d-46ff-ba87-c16d10e83ed6',
senderId: '1ae6f889-f27e-4466-a0a9-021923704097'
},
title: 'Go COYO',
description: 'COYO is an integrated platform for your official company news, social collaboration and team messaging.',
url: 'http://www.coyoapp.com/en/tour',
tld: 'coyoapp.com'
}, {
image: '',
title: 'Hacker News',
description: 'News for the technically interested',
url: 'https://news.ycombinator.com/',
tld: 'news.ycombinator.com'
}];
function deletePreview() {
console.log('clicked');
$log.info('should be deleted');
vm.linkPreviews.splice(0, 1);
}
}
<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-app="commons.ui" ng-controller="LinkPreviewController as $ctrl">
<div ng-repeat="linkPreview in $ctrl.linkPreviews">
<div class="link-preview">
<div class="link-preview-delete pull-right">
<div class="link-preview-delete pull-right">
<span class="link-preview-delete-button" ng-click="$ctrl.deletePreview()">
<i class="zmdi zmdi-close img-close">spanToClick</i>
</span>
</div>
</div>
</div>
</div>
</div>
更新:
在您的指令中,您使用的是 scope:{}
,它会创建隔离范围
,因此您的代码不起作用。
现在进一步 ng-repeat
创建新的子作用域
,因此您的 div 会重复
,但 ng-repeat< 的内部逻辑
就像删除点击是在 new child scope
下一样,所以它不起作用。
如果您执行$parent.$ctrl
,那么它将指向父级并且可以工作。
查看此plunker
总体上最简单的修复方法是从指令中删除隔离范围。 范围:{}
关于javascript - AngularJs | ng-click 不触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44539887/