javascript - AngularJs | ng-click 不触发

Question

我看不出 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>

Answer 1

您需要将空依赖项添加到您的模块中，例如:

 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

总体上最简单的修复方法是从指令中删除隔离范围。 范围:{}