指令中ngChange事件之后的控制器函数

Controller function after ngChange event in directive

本文关键字：控制器 函数 之后 事件 ngChange 指令      更新时间：2023-09-26

我发现了一些问题和示例，但它们都使用了$scope，到目前为止，我的应用程序中还没有使用$scope。当指令中的复选框被选中（ng更改）时，我正在尝试执行控制器函数。

JSFiddle

HTML

<div ng-app="myApp" ng-controller="Controller as ctrl">
    <dir-select doIt="ctrl.doIt()" object="ctrl.object"> 
</div>

控制器和指令

var app = angular.module('myApp', []);
app.controller("Controller",[ function() {
    var ctrl = this;
    ctrl.object = {
        name: "test",
        selected: false
    };
    ctrl.doIt = function() {
      alert("Doing It!");
    };
}]);
app.directive('dirSelect', function() {
  return {
    restrict: 'E',
    template: '<input type="checkbox" ng-model="object.selected" ng-change="doIt()">select',
    scope: {
      object: '=',
      doIt: '&'
    }
  }      
});

我错过了什么？

请尝试此

<dir-select do-it="ctrl.doIt()" object="ctrl.object">

并且在指令中

template: '<input type="checkbox" ng-model="object" ng-change="doIt()">select',

Angular规范化属性名称。在HTML代码中，您应该使用破折号分隔的格式，而不是驼色大小写。只需将doIt="ctrl.doIt()"更改为do-it="ctrl.doIt()"即可。请参阅下面的代码。

<div ng-app="myApp" ng-controller="Controller as ctrl">
    <dir-select do-it="ctrl.doIt()" object="ctrl.object"> 
</div>

编辑您的HTML:

<div ng-app="myApp" ng-controller="Controller as ctrl">
    <input type="checkbox" ng-change="ctrl.doIt()" ng-model="ctrl.object">        
</div>

检查：http://jsfiddle.net/9nmyom0h/

相关文章：