Question

我正在定制一个包含标签的输入指令。我试了几天并参考了一些文章。
唯一的问题是除了ng-change，ng-blur和ng-focus之外，所有其他事件都有效。 https://jsfiddle.net/luneyq/mw3oz2pr/
当然，我可以自己手动绑定这三个事件，它们可以作为https://jsfiddle.net/luneyq/bp7f3z1o/

工作

但我真的不知道为什么ng-change，ng-blur和ng-focus不起作用。这三件事有什么特别之处吗？任何人都可以提供帮助吗？

我的代码如下：

<div ng-app="myApp">
<div ng-controller="MainController">
    <my-input type="number" name="valueNumber1" ng-model="obj.valueNumber1" label="Age" ng-click="log('click')" ng-change="log('change')" ng-blur="log('blur')" ng-focus="log('focus')" ng-mouseleave="log('mouseleave')"></my-input>
    <div id="result"></div>
</div>

JS：

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

app.controller('MainController', function($scope, $window){
    $scope.obj = {valueNumber1: 10};
    $scope.log = function(text) {
        document.getElementById("result").innerHTML = text + ':' + $scope.obj.valueNumber1 + "<br>" + document.getElementById("result").innerHTML;
    };
});

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) == '$')
                    return;
                tInput.attr(key, value);
            });
            tElement.replaceWith('<div class="cbay-input-div">' + tElement.html() + '</div>');
            return;
        }
    };
});

提前谢谢。

Answer 1

问题在于编译/转换/替换不会像您认为的那样工作（不确定您做出错误假设的位置）。

您的代码有什么问题：

1）。您使用的属性名称不正确：您应使用tInput.attr(tAttrs.$attr[key], value);代替tInput.attr(key, value);。

2）。尽管您对my-input函数中的tElement进行了更改，但compile中指定的所有指令都已编译并链接。证明就在这里 - https://jsfiddle.net/fyuz3auc/3/，在控制台中查看myTest指令及其输出：尽管你付出了任何努力，它仍然适用于myInput。

3）。您为指令指定了scope。因此它具有独立的范围，因此您在其中编译的任何内容都无法访问log MainController的{{1}}函数，这就是您的log无效的原因。以下是证明：https://jsfiddle.net/m5tba2mf/1/的小提琴（请查看从$scope.log = $scope.$parent.log返回的link函数中的compile。

为了解决第二个问题，我建议你尝试替代方法 - 我在我的项目中使用它，并且非常喜欢它。我们的想法是将terminal与极高优先级和$compile结合使用。这是更新的小提琴，我认为我在那里做的非常简单：https://jsfiddle.net/uoat55sj/1/。

ng-change和ng-focus在自定义输入指令

1 个答案: