在AngularJS中从父级命令特定的子级组件

Question

我正在使用AngularJS 1.5.8。我有“ myParent”和“ myChild”组件。我认为，我的父母中有1个父母和2个孩子。所以我的问题是：我想在“ myParent”组件的控制器中拥有子“ myChild”组件的实例，并仅向特定的孩子发出命令 makePrimary（），或者像这样...我如何实现这个目标？

JS：

//var myApp = 
angular.module('myApp', ['myChild', 'myParent']);

angular.
module('myChild', []).
component('myChild', {
  template: '<div class="panel panel-default">' +
    '<div class="panel-heading">Child</div>' +
    '<div class="panel-body">' +
    'Child content...' +
    '</div>' +
    '</div>',
  controller: ['$scope', '$element',
    function myChildController($scope, $element) {

    }
  ]
});

angular.
module('myParent', ['myChild']).
component('myParent', {
  template: '<div class="panel panel-default">' +
    '<div class="panel-heading">Parent</div>' +
    '<div class="panel-body">' +
    '<my-child></my-child>' +
    '<hr />' +
    '<my-child></my-child>' +
    '</div>' +
    '</div>',
  controller: ['$scope', '$element',
    function myParentController($scope, $element) {

    // TODO: MAKE CHILD-2 ".panel-primary" CLASS IN HERE.
    // BUT ONLY A SPECIFIC CHILD!

    }
  ]
});

HTML：

<div ng-app="myApp" class="container">
  <my-parent></my-parent>
</div>

用于示例的JSFIDDLE：https ://jsfiddle.net/zhc12t1a/4/

我检查了一些相关的问题，例如：

• angularJS：如何在父范围中调用子范围函数
• AngularJS-访问子范围

但是我找不到一种简单的架构来实现此目标的正确方法。

编辑

我知道一些复杂的方法（从体系结构的角度来看），但我不想使用它们。例如：

使用$ parent或

在myParentController中：

$scope.makeChild1Primary = function () {} 

在myParent模板中：

<my-child make-primary="makeChild1Primary"></my-child>

在myChild组件中

//...
var ctrl = this;
ctrl.makePrimary = function () { /* MAKE PRIMARY LOGIC HERE... */ }
//...
,bindings: {
makePrimary: '='
}

Answer 1

如“ AngularJS-访问子范围 ”中所述，无法从父级访问子级作用域，因为AngularJS处理从子级到父级的属性，而不是相反。

如果您不想将子元素的ng-class绑定到父元素的属性或使用公共服务，则必须明确地将子元素的作用域添加到父属性，如下所示：

function myParentController($scope, $element) {
    $scope.children = [];
    ...
}

function myChildController($scope, $element) {
    $scope.$parent.children.push($scope);
}

然后，您可以像这样从父级访问所有子级：

$scope.children[1].isPrimary = true;

在HTML中，您可以将面板的类绑定到属性“ isPrimary”，如下所示：

<div class="panel panel-default" ng-class="isPrimary ? 'panel-primary' : ''">

您可以在此处找到示例的完整实现：https : //jsfiddle.net/81eesouy/7/