Question

我创建了两个自定义指令，一个父指令和一个子指令，它们通过父指令控制器相互通信。

家长指令

app.directive('attrsCtrl', function ($compile) {
return {
    restrict: 'E',
    scope: {
        attributes: '=array',
        options: '='
    },
    controller: function ($scope, $element) {
        $scope.attributes = [];

        this.returnOptions = function(){
            return $scope.options;
        }

        this.saySomething = function (obj) {
            $scope.attributes.push(obj);
            alert(obj.name + "/" + obj.type.name);

            var newDirective = angular.element('<attributes> </attributes>');
            $element.append(newDirective);
            $compile(newDirective)($scope);
        }
    }
}})

儿童指令

app.directive('attributes', function ($compile) {
return {
    restrict: 'E',
    require: '^attrsCtrl',
    template: '<div ng-class="classInput">' +
        '   <div class="col-md-6" style="padding-left: 0;">' +
        '       <label>Nome do Atributo</label>' +
        '       <input type="text" class="form-control input-sm" placeholder="Nome do Atributo" ng-model="attrname" ng-change="validation()" ng-disabled="afterSend">' +
        '   </div>' +
        '   <div class="col-md-4 " style="padding-left: 0;"> ' +
        '       <label>Tipo do Atributo</label> ' +
        '           <select class="form-control input-sm" ng-options="option.name for option in options" ng-model="attrtype" ng-disabled="afterSend"></select>' +
        '   </div> ' +
        '   <div class="col-md-2" style="padding-right: 0;"> ' +
        '    <label>  </label>' +
        '           <button type="button" class=" btn btn-default pull-right" ng-click="changeButton()" style="margin-top: 1em;" ng-disabled="disabled"> Adicionar </button>' +
        '   </div> ' +
        '</div>' +
        '<div class="clearfix></div>',

    link: function (scope, element, attrs, attrsCtrl) {
        scope.classInput = 'form-group';
        scope.disabled = true;
        scope.afterSend = false;
        scope.options = attrsCtrl.returnOptions();


        scope.changeButton = function () {
            scope.attr = {
                name: scope.attrname,
                type: scope.attrtype
            };
            attrsCtrl.saySomething(scope.attr);
            scope.disabled = true;
            scope.afterSend = true;
        }

        scope.validation = function () {
            if (scope.attrname.length < 6) {
                scope.classInput = 'form-group has-error';
            } else {
                scope.classInput = 'form-group has-success';
                scope.disabled = false;
            }
        }

    }
};})

HTML

 <attrs-ctrl array="myAttributes" options="options" >
          <attributes/>
 </attrs-ctrl>

我的问题是，在我点击两次创建指令后，它会自动创建另一个指令，但我无法在其中键入任何内容！这种行为应该发生在我点击“Adicionar”按钮后。

Answer 1

这里有两个问题

在上面的例子中，link函数包含scope.disabled = true;，它应该更改为scope.disabled = false;我想这是在这里粘贴示例时的拼写错误。
< / LI>
其次，我猜你已经明确添加了父指令依赖项，因为你想创建独立的子指令。根据您的代码，父和子指令之间的范围正在共享。因此，父指令的范围将在所有子指令中共享，并且所有字段都显示为禁用。

将scope:{},添加到您的指令函数中，如下所示... 这将创建单独的子指令scope。

有一篇很好的文章详细解释了范围：https://github.com/angular/angular.js/wiki/Understanding-Scopes

app.directive('attributes', function ($compile) {
return {
    restrict: 'E',
    require: '^attrsCtrl',
    scope: {},
    template: '<div ng-class="classInput">' +
        '   <div class="col-md-6" style="padding-left: 0;">' +
        '       <label>Nome do Atributo</label>' +
        '       <input type="text" class="form-control input-sm" placeholder="Nome do Atributo" ng-model="attrname" ng-change="validation()" ng-disabled="afterSend">' +
        '   </div>' +
        '   <div class="col-md-4 " style="padding-left: 0;"> ' +
        '       <label>Tipo do Atributo</label> ' +
        '           <select class="form-control input-sm" ng-options="option.name for option in options" ng-model="attrtype" ng-disabled="afterSend"></select>' +
        '   </div> ' +
        '   <div class="col-md-2" style="padding-right: 0;"> ' +
        '    <label>  </label>' +
        '           <button type="button" class=" btn btn-default pull-right" ng-click="changeButton()" style="margin-top: 1em;" ng-disabled="disabled"> Adicionar </button>' +
        '   </div> ' +
        '</div>' +
        '<div class="clearfix></div>',

    link: function (scope, element, attrs, attrsCtrl) {
        scope.classInput = 'form-group';
        scope.disabled = false;
        scope.afterSend = false;
        scope.options = attrsCtrl.returnOptions();


        scope.changeButton = function () {
            scope.attr = {
                name: scope.attrname,
                type: scope.attrtype
            };
            attrsCtrl.saySomething(scope.attr);
            scope.disabled = true;
            scope.afterSend = true;
        }

        scope.validation = function () {
            console.log("validate");
            if (scope.attrname.length < 6) {
                scope.classInput = 'form-group has-error';
            } else {
                scope.classInput = 'form-group has-success';
                scope.disabled = false;
            }
        }
    }
};})

指令不按我想要的方式行事 - AngularJS

1 个答案: