Question

我正在尝试在网页上创建一个搜索按钮，当点击该按钮时，将显示一个模式对话框，提示用户输入他们的搜索查询。搜索按钮是一个浮动操作按钮，一个材质设计，当鼠标悬停在按钮上时显示特定的“搜索类型”（与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'];

组件/ FAB / index.js

import view from './fab.html';

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

export default Fab;

组件/ 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指令应该触发并执行回调函数。但事实并非如此！

Answer 1

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

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

</div>

Angular 1.5 Component回调绑定未执行

1 个答案: