Angular 1.5 组件回调绑定未执行答案

【问题标题】：Angular 1.5 Component callback binding not executingAngular 1.5 组件回调绑定未执行
【发布时间】：2016-12-15 22:21:39
【问题描述】：

我正在尝试在网页上创建一个搜索按钮，当单击该按钮时，将显示一个模式对话框，提示用户输入他们的搜索查询。搜索按钮是一个浮动操作按钮，一种材料设计，当将鼠标悬停在按钮上时会显示特定的“搜索类型”（与Materialize CSS buttons page 上的示例完全相同）。我在父控制器上定义了一个方法，该方法将简单地将消息记录到控制台以测试此功能是否有效。该方法使用 Angular 的 bindings 语法传递给搜索按钮组件，并使用默认的 $ctrl 控制器名称从搜索的 HTML 模板中调用。

但是，我发现单击相关按钮时根本没有调用回调，我不完全确定为什么。没有错误或显示任何内容。任何人都可以看看吗？下面是相关代码。有问题的组件称为fab，表示浮动操作按钮。

index.html

<body data-ng-app="app" data-ng-cloak>
  <div class="wrapper" data-ng-controller="ctrl">
    <div class="content" ui-view="content"></div>

    <fab data-on-button-click="ctrl.onButtonClick($message)"></fab>
  </div>

  <script type="text/javascript" src="build/app.bundle.js"></script>
</body>

app.js

import angular from 'angular';
import controller from './app.controller';
import routing from './app.routing';
import Fab from './components/fab';

angular.module('app')
    .component('fab', Fab)
    .controller('ctrl', controller)
    .config(routing);

app.controller.js

export default class AppController {
    constructor($document) {
        this.document = $document;
    }

    onButtonClick($message) {
        console.log($message);
    }
}

AppController.$inject = ['$document'];

components/fab/index.js

import view from './fab.html';

let Fab = {
    template: view,
    bindings: {
        onButtonClick: '&'
    }
};

export default Fab;

components/fab/fab.html

<div class="fab__container">
  <a class="fab__main blue">
    <img class="fab__icon" src="./search.svg">
  </a>

  <ul class="fab__options">
    <li class="fab__option-wrapper" data-active>
      <label class="fab__text">Search Type 3</label>
      <div class="fab__option red" data-ng-click="$ctrl.onButtonClick({$message: 'Type 3'})">
        <a class="fab__icon--small">&</a>
      </div>
    </li>

    <li class="fab__option-wrapper" data-active>
      <label class="fab__text">Search Type 2</label>
      <div class="fab__option yellow" data-ng-click="$ctrl.onButtonClick({$message: 'Type 2'})">
        <a class="fab__icon--small">@</a>
      </div>
    </li>

    <li class="fab__option-wrapper" data-active>
      <label class="fab__text">Search Type 1</label>
      <div class="fab__option green" data-ng-click="$ctrl.onButtonClick({$message: 'Type 1'})">
        <a class="fab__icon--small">#</a>
      </div>
    </li>
  </ul>
</div>

注意当用户点击相关的<div> 时，Angular 的ngClick 指令应该如何触发并执行回调函数。但事实并非如此！

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您在定义控制器时没有使用“控制器为”语法，因此您的视图中未定义 ctrl。试试这个

<div class="wrapper" ng-controller="ctrl as ctrl">

</div>

【讨论】：

天哪，我觉得自己像个白痴。我没有意识到我必须为控制器命名。认为我可以通过其名称调用控制器。谢谢！
发生在我们最好的人身上
或者，您可以将AppController 导入到您的组件中，并将其注册为controller: AppController。在这种情况下，您可以在模板中使用$ctrl，而无需担心controllerAs 语法