Управлять определенным дочерним компонентом от родителя в AngularJS

Как упоминалось в "AngularJS — доступ к дочерней области", нет способа получить доступ дочернюю область от родителя, потому что AngularJS обрабатывает свойства от дочернего к родительскому, а не наоборот.

Если вы не хотите привязывать ng-класс дочернего элемента к родительскому свойству или использовать общий сервис, вы должны явно добавить дочерние области к родительскому свойству следующим образом:

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/

Используйте событие $emit или $broadcast.

Я думаю, что это лучший чистый ответ, вы можете попробовать с сервисами, но этот ответ мне нравится больше :)

Быстрый пример

function controllerParent($scope){
    $scope.emitActionClick = function(){
       $scope.$broadcast('myTestEvent',{data:"passed"})               
    }


}
function controllerChildX($scope){
   $scope.$on('myTestEvent',function(event,data){ 
      // HERE WE ARE :)
       console.log(data);
   }

}

Если вы используете Контроллер как, вам потребуется внедрить $scope или $rootScope. К сожалению, другого способа обработки событий отправки и вещания нет.

Я достиг этой цели, используя конфигурацию bindings дочернего компонента. Ключевым моментом здесь является то, что изменения (сделанные родителем) отражаются в свойстве привязки дочернего элемента. Мы должны помнить об этом всегда! Итак, необходимые изменения приведены ниже:

JS:

function myParentController($scope) {
   // the variables that controls children's primary statuses
   $scope.child1Primary = false;
   $scope.child2Primary = false;
}


// component definition
// ...
controller: ['$scope',
    function myChildController($scope) {
    // This $watch is not required. I used it for only showing that the changes are reflecting dynamically.
      $scope.$watch('$ctrl.isPrimary', function(newVal) {
        alert("CHANGE DETECTED BY CHILD\n$ctrl.isPrimary: " + newVal);
      })
    }
  ],
  bindings: {
    isPrimary: '<'
  }
//...

РОДИТЕЛЬСКИЙ ШАБЛОН:

<my-child is-primary="child1Primary"></my-child><br />
<my-child is-primary="child2Primary"></my-child>

ПОЛНАЯ ССЫЛКА JSFIDDLE: https://jsfiddle.net/zhc12t1a/5/

И всякий раз, когда мы изменяем переменную childXPrimary, переменная $ctrl.isPrimary изменяется в дочерней области. Таким образом, нет необходимости в такой функции, как makePrimary, в компоненте myChild.

ПРИМЕЧАНИЕ. ng-class используется для смены класса, но это деталь. Важным моментом здесь является коммуникационная архитектура.

Я пробовал привязку переменных триггера, но это было осложнено необходимостью сбрасывать триггер после каждой активации или использовать numerator в качестве триггера. Это потому, что ребенку нужно различать, когда триггер изменился, чтобы знать, был ли он активирован.

Вместо этого я отправил ребенку observable. Ребенок прослушивает родительские команды на observable. Мы можем использовать Rxjs в AngularJs.

Несколько похожий метод может заключаться в том, чтобы предоставить дочернему элементу функцию регистрации от родителя, в которой дочерний элемент вызывает и предоставляет объект интерфейса, который затем родитель может сохранить и использовать для активации методов дочернего элемента. Проблема с этим подходом заключается в необходимости очистки сохраненного интерфейса в родительском элементе, когда дочерний элемент ушел. В parent observable solution мы делаем это в другом направлении. Ребенок несет ответственность за регистрацию себя на родителя и очистить себя.