Question

我试图按照http://www.codelord.net/2016/05/13/understanding-angulars-and-binding/在AngularJS组件上实现回调。在https://plnkr.co/edit/dxyI0p0pZFZdMalLfvXO?p=preview，我试图说明我遇到的问题。我以三种不同的方式实例化组件：

<section id="main-content" ng-controller="myPageController as ctrl">
<my-component label="Scope" myChange="cb()"></my-component>
<my-component label="Ctrl" myChange="ctrl.cb()"></my-component>
<my-component label="Page" myChange="page.cb()"></my-component>
</section>

但它们都不起作用。我看到函数记录的消息与组件中的复选框相关联，但我没有看到来自回调的消息，也没有看到任何错误。我错过了什么？

Answer 1

＆＃34;平变化＆＃34;是HTML元素的保留属性。使用不同的名称，例如myChange。见https://www.w3schools.com/tags/att_onchange.asp

Answer 2

以下是Plunker：https://embed.plnkr.co/OYpLu8/

如果您将文件myPage.inc更改为：

<section id="main-content" ng-controller="myPageController as ctrl">

    <h2>This is the page.</h2>
    <my-component label="Scope"  ng-model="confirmed" ng-change="cb()"></my-component>
    <my-component label="Ctrl"  ng-model="confirmed" ng-change="ctrl.cb()"></my-component>
    <my-component label="Page"  ng-model="confirmed" ng-change="page.cb()"></my-component>

</section>

但它只能解决ng-change问题。

这些ng-model没有做任何事情，这个模型confirmed甚至不存在于任何控制器中，它只在ng-change工作。

编辑：你需要将函数传递给指令给这个函数调用。你这样做的方法是在你的指令中创建一个scope。

'scope': {
  'yourFunction': '&'
}

并在component内进行调用。

<label>{{vm.label}}</label>

<input type="checkbox" ng-click="vm.handleCheckboxClick()" ng-model="confirmed" ng-change="yourFunction()"/><br>

现在，每次要调用局外人函数时，都需要将此函数传递给component。

<my-component label="Scope" your-function="cb()"></my-component>
<my-component label="Ctrl"  your-function="ctrl.cb()"></my-component>

为什么我的组件回调没有按预期工作？

2 个答案: