Angular指令函数param camel case无法正常工作

时间:2017-01-12 09:19:54

标签: javascript angularjs angularjs-directive

我有一个带有隔离范围的Angular 1.5.8指令,并且传入了两个函数。我发现当这些函数的名称都是小写时它们正常工作但是如果它们是camelCased则它们不起作用。

请注意,我在谈论的是param的值而不是param名称本身。这里是使用该指令的html:

<buttons-radio model="contactInformationAcceptable" disabled="approved" callback="personalapprovalfieldchanged()" focus="focuscallback($event)"></buttons-radio>

请注意回调和焦点值的情况。如果我将这些更改为驼峰大小写(并更改父作用域中的函数定义),那么它们就无法工作。

这是指令:

angular.module("manageApp").directive('buttonsRadio', ['$timeout', function ($timeout) {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            disabled: '=',
            callback: '&',
            focus: '&'
        },
        template: '<div class="form-group yesorno"> ' +
            '   <div class="col-xs-12">' +
            '      <button type="button" class="btn btn-success" ng-disabled="disabled" ng-class="{active: yesValue}" ng-click="clickYes()" ng-focus="localFocus($event)">Yes</button>' +
            '      <button type="button" class="btn btn-danger" ng-disabled="disabled" ng-class="{active: noValue}" ng-click="clickNo()" ng-focus="localFocus($event)">No</button>' +
            '   </div>' +
            '</div>',
        controller: function ($scope) {
            $scope.$watch('model', function (value) {
                if (value) {
                    if (value == 0) {
                        $scope.yesValue = false;
                        $scope.noValue = false;
                    }
                    if (value == 1) {
                        $scope.yesValue = true;
                        $scope.noValue = false;
                    }
                    if (value == 2) {
                        $scope.yesValue = false;
                        $scope.noValue = true;
                    }
                }
            });
            $scope.localFocus = function ($event) {
                $scope.focus({ $event: $event });
            }
            $scope.performCallback = function () {
                $timeout(function () {
                    $scope.callback();
                });
            }
            $scope.yesValue = false;
            $scope.noValue = false;
            $scope.clickYes = function () {
                $scope.yesValue = !$scope.yesValue;
                if ($scope.yesValue) {
                    $scope.noValue = false;
                    $scope.model = 1;
                } else {
                    $scope.model = 0;
                }
                $scope.performCallback();
            }
            $scope.clickNo = function () {
                $scope.noValue = !$scope.noValue;
                if ($scope.noValue) {
                    $scope.yesValue = false;
                    $scope.model = 2;
                } else {
                    $scope.model = 0;
                }
                $scope.performCallback();
            }
        }
    }
}]);

编辑:这是具有我需要使用的功能的父控制器:

angular.module("manageApp").controller('approvalPersonalController', ['$scope', '$http',
function ($scope, $http) {

    //personalApprovalFieldChanged    personalapprovalfieldchanged
    $scope.personalapprovalfieldchanged = function () {
        //a field has changed so save them all
        console.log('field has changed - do something');
    };

}]);

我很困惑为什么这是因为我已经通过Pluralsight指令课程,并且骆驼案例在我从课程中创建的但不是在现实世界的例子中可以正常工作。

它确实有效(在正确的时间调用正确的函数)但我想尽可能使用驼峰大小写的函数名称。

由于

0 个答案:

没有答案