Question

HeJ小鼠。我没有看到为什么ng-click不能工作的明显原因，但是当点击它绑定的元素时它不会触发。

将呈现两个元素。每个人在其div的右上角都有一个图标X，它应该触发deletePreview。这将导致当前删除linkPreviews的第一项。当通过$ timeout调用此方法时，它按预期工作。然而，试图点击图标不起作用。

我很高兴有任何想法。感谢。

＆＃13;

(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);

＆＃13;

<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>

＆＃13;

Answer 1

您需要将empty dependency添加到您的模块中，例如：

 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:{}，这会创建isolated scope，因此您的代码无效。

现在进一步ng-repeat创建new child scope，因此您的div gets repeated但内部逻辑ng-repeat就像删除点击一样在new child scope下，所以它不起作用

如果您执行$parent.$ctrl，那么它将指向父级并且可以正常工作。

请参阅此plunker

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

Answer 2

你错了控制器中的函数声明。

要使用控制器中的功能，您需要将其设置为

this.deletePreview

或

$scope.deletePreview

（在最后一种情况下，您不必在$ctrl视图中写下ng-click。请记住注入$scope！）。

Answer 3

我想这是AngularJS中的一个错误？或者我确实误用了它。

在我的示例中，指令的顶部html元素是<div ng-repeat="linkPreview in $ctrl.linkPreviews">，这意味着将在同一层次结构级别添加多个div。

当把它包装在另一个div中时，正如@anoop的例子所示，它突然工作了。我不明白的是，为什么vm.linkPreviews的数组总是附加到控制器上，但是函数vm.deletePreviews只有当它包含在一个顶部div中时才会起作用。

使用HTML代码：

＆＃13;

<div>
    <div ng-repeat="linkPreview in $ctrl.linkPreviews">
        <div class="link-preview">
            <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 class="link-preview-image-wrapper">
                <div class="link-preview-image">
                    <coyo-image-reference ng-if="linkPreview.image"
                                          file-id="::linkPreview.image.fileId"
                                          sender-id="::linkPreview.image.senderId"
                                          size-definitions="{'default': 'S', 'screen-lg': 'S'}"></coyo-image-reference>
                    <div class="link-preview-icon" ng-if="!linkPreview.image">
                        <i class="zmdi zmdi-globe"></i>
                    </div>
                </div>
            </div>
            <div class="link-preview-text-wrapper">
                <div class="link-preview-line">
                    <span class="link-preview-title" ng-bind="::linkPreview.title"></span>
                </div>
                <div class="link-preview-line">
                    <span class="link-preview-description" ng-bind="::linkPreview.description"></span>
                </div>
                <div class="link-preview-line">
                <span class="link-preview-url">
                    <a href="{{ ::linkPreview.url }}" target="_blank">{{ ::linkPreview.tld }}</a>
                </span>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

AngularJs | ng-click无法正常工作

3 个答案: