Question

我正在尝试将我的columnDirectives控制器包含在我的addColumn指令中，以便他们可以进行通信。我收到此错误：Error: [$compile:ctreq] http://errors.angularjs.org/1.2.6/$compile/ctreq?p0=columnDirective&p1=addColumn它肯定是由于“require”，因为删除该行会删除错误。我在这里做错了什么？

感谢。

var layout = angular.module('layout-module', []);

layout.controller( "layoutController", function($scope) {
    $scope.rows = [{
        columns: [
            {size: '1'},
            {size: '2'},
        ]
    }];
});

layout.directive('rowDirective', function () {
    return {
        template:     '<div class="row">'
                    + '<div class="small-11 columns">'
                    + '<div class="row">'
                    + '<div data-ng-repeat="column in row.columns" class="small-{{ column.size }} columns">'
                    + '<input type="text" data-ng-model="column.size" column-directive>'
                    + '</div>'
                    + '</div>'
                    + '</div>'
                    + '<div class="small-1 columns"><input type="text" data-ng-model="newColumn" column-directive type_of="add"><button add-column></button></div>'
                    + '</div>',
        link: function (scope, el, attrs) {

        }
    }
});

layout.directive('columnDirective', function() {
    return {
        require: 'ngModel',
        controller: function ($scope) {
        },
        // scope: { 
        //  directive_type: '=test'
        // },
        link: function (scope, el, attrs, ngModel) {
            if (!ngModel) return;

            ngModel.$parsers.unshift(function (viewValue) {

                var columns = scope.row.columns;

                var column_total_before = 0;
                angular.forEach(columns, function(column) {
                    var column_size = parseInt(column.size);
                    column_total_before = column_total_before + column_size;
                });

                if(attrs.typeOf != "add") {
                //Remove current (prior to edit) value from total
                    column_total_before = column_total_before - ngModel.$modelValue;
                    var default_value = 1;
                } else {
                    if (column_total_before == 12) {
                        var default_value = 0;
                    }
                    else {
                        var default_value = (12 - column_total_before);
                    }
                }

                //Convert string to integer
                viewValue = parseInt(viewValue);

                //Add total existing columns with new value
                column_total = column_total_before + viewValue;
                scope.column_total = column_total;

                if(column_total >= 1 && column_total <= 12 && viewValue > 0) {
                    return viewValue;
                } else if (isNaN(viewValue)) {
                    ngModel.$setViewValue(default_value);   
                    return default_value;
                } else if (column_total_before == 12 && viewValue == 0) {
                    return viewValue;
                } else {
                    ngModel.$setViewValue(default_value);
                    ngModel.$render();
                    return default_value;
                }

            });
        }
    }
});


layout.directive('addColumn', function() {
    return {
        require: "columnDirective",
        link: function (scope, el, attrs, columnDirective) {
            el.on('click', function() {

            });
        }
    }
});

Answer 1

columnDirective与addColumn不在同一元素上。

如果addColumn是columnDirective的孩子，请按照以下方式撰写：

return {
    require: "^columnDirective",
    ...

有关您的问题的更多信息，请参阅文档。 http://docs.angularjs.org/error/ $编译：ctreq

但在您的情况下，您可能需要考虑取决于rowDirective的范围并使用ng-click

Answer 2

column-directive已附加到input元素，该元素是button元素的兄弟。

当您将需求定义为require: "columnDirective"而不是Angular时，可以在同一元素（column-directive）上找到input。

由于您的指令是兄弟姐妹，因此在它们之间进行通信的唯一方法是使用共享服务。

不需要找到其他指令的控制器，接收错误

2 个答案: