Угловой 1.5 Не родительский компонент для связи компонентов

Я пытаюсь сделать что-то простое.Угловой 1.5 Не родительский компонент для связи компонентов

У меня есть компонент, называемый отправителем, который хочет отправить сообщение не-дочернему компоненту, называемому получателем. Отправитель находит компонент получателя и изменяет его значение атрибута.

К сожалению, компонент-получатель не признает, что его атрибут был изменен.

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

Как получить принимающий компонент для распознавания его нового значения атрибута?

Вот plunkr

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]" data-semver="1.5.8" 
      src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    </head> 
    <body> 
    <h1>Test sending values to a component from a non-parent component</h1> 
    <sender id="SendingComponent"></sender> 
    <h2>past send tag</h2> 
    <receiver id="ToComponent" textvalue="defaultvalue"></receiver> 
    <h2>Past receiver tag</h2> 
    <script src="script.js"></script> 
    </body> 
</html>

Javascript:

var app = angular.module('app',[]) 
    .component("sender", { 
    template: "<div> I send messages to receiver. 
     Receiver should say 'a new sent value'.</div>", 
    controller: [function() { 
     var ctrl = this; 
     ctrl.$oninit = function() { 
     var receiver = document.getElementById('ToComponent'); 
     receiver.attributes.setNamedItem('textvalue', 'a new sent value'); 
     $timeout(function() { $scope.apply();}); 
    }; 
    }]}) 
    .component("receiver", { 
    template: '<div>I received this message: 
     {{receiverCtrl.textvalue}}</div>', 
    bindings: { 
     textvalue: '<' // using '@' makes the default value work, 
         // but is described as a one time bind 
    }, 
    controllerAs: 'receiverCtrl', 
    controller: [function() { 
     var ctrl = this; 
     ctrl.$onChanges = function (changesObj) { 
     if (changesObj.textvalue !== undefined) { 
      ctrl.textvalue = changesObj.textvalue.currentValue; 
     } 
     } 
    }] 
}); 

angular.bootstrap(document, ['app']);

источник

2016-11-09 david wendelken

Звуки для меня, как вы должны работать с событиями вместо этого. Возможно, ваши отправители будут $broadcast значение, которое нужно изменить, и ваш ресивер будет слушать это событие и делать все, что нужно сделать со значением.

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

источник

2016-11-09 15:25:33 lucasnadalutti

Это решило проблему. Я выбрал $ rootscope. $ Broadcast из-за того, где компоненты могут находиться в полностью реализованной версии. При чтении по этой теме я нашел ссылку на этот код github, который может быть более эффективным (за исходный комментарий, от которого я его отслеживал). Не подтвердили это, но вот ссылка: https://github.com/georapbox/angular-PubSub –

Угловой 1.5 Не родительский компонент для связи компонентов

ответ

Смежные вопросы