Angular 1.5组件回调绑定未执行

Question

I'm attempting to create a search button on a webpage that, when clicked, will display a modal dialog that prompts the user to enter in their search query. 我正在尝试在网页上创建一个搜索按钮，单击该按钮时将显示一个模式对话框，提示用户输入搜索查询。 The search button is a Floating Action Button, a la Material Design, that displays specific "search types" when hovering over the button (exactly the same as the example found on the Materialize CSS buttons page ). 搜索按钮是“浮动操作按钮”，即一种材料设计，将鼠标悬停在该按钮上时会显示特定的“搜索类型”（与在Materialize CSS按钮页面上找到的示例完全相同）。 I've defined a method on the parent controller that will simply log a message to the console in order to test that this functionality works. 我已经在父控制器上定义了一个方法，该方法将简单地将消息记录到控制台以测试该功能是否有效。 The method is passed to the search button component using Angular's bindings syntax, and is being called from the search's HTML template using the default $ctrl controller name. 该方法使用Angular的bindings语法传递给搜索按钮组件，并使用默认的$ctrl控制器名称从搜索的HTML模板中调用。

However, I'm finding that the callback isn't being called at all when clicking on the relevant button, and I'm not entirely sure as to why. 但是，我发现单击相关按钮时根本没有调用回调，而且我也不完全清楚为什么。 There are no errors or anything being displayed. 没有错误或正在显示任何内容。 Can anyone take a look? 谁能看一看？ Below is the relevant code. 以下是相关代码。 The component in question is called fab , for Floating Action Button. 有问题的组件称为fab ，用于“浮动动作按钮”。

index.html 的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 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 app.controller.js

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

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

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

components/fab/index.js 组件/ FAB / index.js

import view from './fab.html';

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

export default Fab;

components/fab/fab.html 组件/ 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>

Note how when the user clicks on the relevant <div> , Angular's ngClick directive should trigger and execute the callback function. 请注意，当用户单击相关的<div> ，Angular的ngClick指令应如何触发并执行回调函数。 But it's not! 但这不是！

Answer 1

You are not using the "controller as" syntax when you define your controller so ctrl is not defined in your view. 定义控制器时，没有使用“ controller as”语法，因此在视图中未定义ctrl 。 Try this 尝试这个

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

</div>

Angular 1.5组件回调绑定未执行

问题描述

1 个解决方案

解决方案1
4 已采纳 2016-08-09 18:38:19

Angular 1.5组件回调绑定未执行

问题描述

1 个解决方案

解决方案1 4 已采纳 2016-08-09 18:38:19

解决方案1
4 已采纳 2016-08-09 18:38:19