AngularJS：ng-click 在自定义输入指令中不起作用答案

【问题标题】：AngularJS: ng-click not working in custom input directiveAngularJS：ng-click 在自定义输入指令中不起作用
【发布时间】：2016-05-02 20:36:00
【问题描述】：

我是 AngularJS 的新手，目前我正在研究带有标签的自定义输入指令。
我参考了一篇关于堆栈溢出的文章，但遇到了问题。

运行代码在小提琴上： http://jsfiddle.net/luneyq/bpN9b/18/

核心代码如下：

<!doctype html>
<html>
<head>
    <script src="../common/angular.js"></script>
 </head>
<body>

<div ng-app="myApp">
    <div ng-controller="MainController">
        <my-input type="number" name="valueNumber1" ng-model="valueNumber1" label="Age" ng-change="change()" ng-click="click()"></my-input>
        <div id="result">a</div>
    </div>
</div>

<script>
    var app = angular.module("myApp", []);

    app.controller('MainController', function($scope, $window){
        $scope.valueNumber1 = 10;
        $scope.change = function() {
            document.getElementById("result").innerHTML = 'change:' + $scope.valueNumber1;
        };
        $scope.click = function() {
            document.getElementById("result").innerHTML = 'click:' + $scope.valueNumber1;
        };
    });

    app.directive('myInput', function() {
        return {
            require:  '^ngModel',
            restrict: 'EA',
            scope: {
                ngModel: '=',
                name: '@name',
                label: '@label'
            },
            replace: true,
            transclude: true,
            //priority: 10,
            template: '<div>' +
            '<label for="{{ name }}">{{label}}</label>' +
            '<input id="{{ name }}" ng-model="ngModel" />' +
            '</div>',
            compile: function(tElement, tAttrs, transclude) {
                var tInput = tElement.find('input');
                // Move the attributed given to 'custom-input' to the real input field
                angular.forEach(tAttrs, function(value, key) {
                    if (key.charAt(0) == '$' || key == "class")
                        return;
                    tInput.attr(key, value);
                    tInput.parent().removeAttr(key);
                });
                tElement.removeAttr('ng-model');
                return;
            }
        };
    })
</script>

</body>
</html>

我的问题是：
1. ng-click 和 ng-change 对输入不起作用
2. ng-model="ngModel" on input element，这里为什么使用ngModel？如果我将 ngModel 更改为 aaa，则输入的初始值消失
3. compile函数中的属性复制去掉了dash(-)信号，ng-click被复制为ngClick。
我不确定这是不是这个问题的原因。
谁能帮忙解决这个问题？

【问题讨论】：

Angular 自动将非驼峰式变量转换为驼峰式，因为 JS 将破折号理解为减号。

标签： angularjs angularjs-directive

【解决方案1】：

您的问题是单击并更改不在您的隔离范围内的方法 - 但是您没有在这里使用 Angular 的双向绑定 - 而是简单地在结果 div 上使用 ng-bind - 这是一个小提琴http://jsfiddle.net/bpN9b/20/

var app = angular.module("myApp", []);

app.controller('MainController', function($scope, $window){
    $scope.valueNumber1 = 10;
});

app.directive('myInput', function() {
    return {
        require:  '^ngModel',
        restrict: 'EA',
        scope: {
            ngModel: '=',
            name: '@name',
            label: '@label'
        },
        replace: true,
        priority: 10,
        template: '<div class="cbay-input-div">' +
        '<label for="{{ name }}">{{label}}</label>' +
        '<input id="{{ name }}" ng-model="ngModel" />' +
        '</div>',
        compile: function(tElement, tAttrs, transclude) {
            console.log(tAttrs);
            var tInput = tElement.find('input');
            // Move the attributed given to 'custom-input' to the real input field
            angular.forEach(tAttrs, function(value, key) {
                //console.log(key + " = " + value);
                if (key.charAt(0) == '$' || key == "class")
                    return;
                tInput.attr(key, value);
                tInput.parent().removeAttr(key);
            });
            tElement.removeAttr('ng-model');
            return;
        }
    };
});

这是模板

<div ng-app="myApp">
    <div ng-controller="MainController">
        <my-input type="number" name="valueNumber1" ng-model="valueNumber1" label="Age" ng-change="change(this)" ng-click="click(this)"></my-input>
        <div id="result" ng-bind="valueNumber1">a</div>
    </div>
</div>

【讨论】：

我没听懂你的意思，你加了
change="change" type="number"
抱歉忽略更改和单击属性 - 我开始解决您的原始范围问题，他们将在您的隔离范围内设置功能，您可以通过添加 click: '=', change: '= ' - 但正如我所说的那样，这样做是完全错误的 - 只需按照小提琴使用 ng-bind :)
如果你喜欢这样就足够了，但是当你有 ngModel 和 ngBind 的自动 2 路绑定可用时使用 jquery 更新 dom 元素只会为你自己做艰苦的工作和不必要的代码。