Javascript 如何在角度视图中显示指令范围的对象

如何在html中显示

$scope.attributes

数组

例如，在多次按下按钮后，如何显示JSON集合

[{'row'}，{'tout'}，{'row'}]

等等

是否有更好的方法来执行此操作，如将指令对象返回到父控制器？即使这不是正确的方法，你会怎么做。。哈哈

html

  <div ng-app="docsSimpleDirective">
        <div ng-controller="Ctrl">

            <h4>directive to directive communication</h4>
            <btn row></btn>
            <btn tout></btn>
            {{btn.attributes | json}}
        </div>
    </div>

指令间通信
{{btn.attributes}json}

JS

    angular.module('docsSimpleDirective', [])
        .controller('Ctrl', function($scope) {
           $scope.attributes = [];
           $scope.alertMessage = function(message) {
                alert(message); 
            }
           $scope.applyAlert = function() {
                alert('asdlfkjsadlfkj'); 
           }
        })
        .directive('btn', function() {
          return {
            restrict: 'E',
              scope: {},
            controller: function ($scope) {
                $scope.attributes = []

                this.addRow = function() {
                 $scope.attributes.push('row')   
                }
                this.addTout = function() {
                 $scope.attributes.push('tout')   
                }
            },
              link: function(scope, element) {
                  element.bind('click', function(){
                      console.log(scope.attributes);
                  })   
              }

          };
        })
      .directive('row', function() {
          return{
              restrict: 'A',
              require: 'btn',
              template: '<button>add Row</button>',
              link: function(scope, element, attrs, btnCtrl) {
                  btnCtrl.addRow();
              }
          };
      })
      .directive('tout', function() {
          return{
              restrict: 'A',
              require: 'btn',
              template: '<button>add tout</button>',
              link: function(scope, element, attrs, btnCtrl) {
                  btnCtrl.addTout();
              }
          };
      })

angular.module（'docsSimpleDirective'，[]）
.controller（'Ctrl'，函数（$scope）{
$scope.attributes=[]；
$scope.alertMessage=函数（消息）{
警报（信息）；
}
$scope.applyAlert=函数（）{
警报（“asdlfkjsadlfkj”）；
}
})
.指令（'btn'，函数（）{
返回{
限制：'E'，
作用域：{}，
控制器：功能（$scope）{
$scope.attributes=[]
this.addRow=函数（）{
$scope.attributes.push（'行'）
}
this.addTout=函数（）{
$scope.attributes.push（'tout'）
}
},
链接：功能（范围、元素）{
元素绑定（'单击'，函数（）{
console.log（scope.attributes）；
})   
}
};
})
.directive（'行'，函数（））{
返回{
限制：“A”，
要求：'btn'，
模板：“添加行”，
链接：功能（范围、元素、属性、btnCtrl）{
btnCtrl.addRow（）；
}
};
})
.directive（'tout'，function（）{
返回{
限制：“A”，
要求：'btn'，
模板：“添加tout”，
链接：功能（范围、元素、属性、btnCtrl）{
btnCtrl.addTout（）；
}
};
})

以下是一个示例

由于您将

btn

声明为隔离作用域（

scope:{}

），因此无法影响控制器的作用域（不需要它）

在此HTML中：

<div ng-app="docsSimpleDirective">
    <div ng-controller="Ctrl">

        <h4>directive to directive communication</h4>
        <btn row></btn>
        <btn tout></btn>
        {{btn.attributes | json}}
    </div>
</div>

<div ng-app="docsSimpleDirective">
    <div ng-controller="Ctrl">
        <hr /> <hr /> <hr />
        <h4>directive to directive communication</h4>
        <btn row></btn>
        <btn tout></btn>
        {{attributes}}
    </div>
</div>

去掉隔离的范围，你开始得到你想要的结果。因此，实现这一点的一种方法是不使

btn

隔离作用域：

.directive('btn', function() {
      return {
        restrict: 'E',
        controller: function ($scope) {

            this.addRow = function() {
             $scope.attributes.push('row')   
            }
            this.addTout = function() {
             $scope.attributes.push('tout')   
            }
        },
          link: function(scope, element) {
              element.bind('click', function(){
                  console.log(scope.attributes);
              })   
          }

      };
    })

---

你想用什么来代替

{{btn.attributes}}

？是的，那将是完美的否，我的意思是你能举一个例子，说明你想用什么信息来代替

{btn.attributes}

。我很难理解您的期望是什么，因为有2个

btn

指令。啊，对不起，单击任一按钮，我希望它按下字符串[{row}、{tout}、{row}……等等]我想{btn.attributes | json}这更有意义吗？我还更新了问题以更好地反映评论关注的问题？我可能需要回到绘图板，但我希望单击它会在属性数组上推送新行或tout对象。然后，您可以触发捕获的事件，但这也有缺点。您应该推送数组项，然后使用

ng repeat

渲染每个

btn

。