У меня есть два элемента на моей странице, которые каким-то образом не вложены друг в друга. С атрибутами первого я хотел бы установить содержимое второго, например:
<body>
<input info="This is some info"></input>
<div>{{info}}</div>
</body>
Я знаю, что что-то подобное можно сделать, как описано в «AngularJS — изменение входного значения директивы атрибута", но в моей ситуации содержимое атрибута является значением модели. Более того, я уже использую ng-model
для обработки входного значения.
В итоге решил проблему так:
<body>
<input infobox info="This is some info"></input>
<div>{{info}}</div>
</body>
app.directive('infobox', function() {
return {
restrict : 'A',
scope : {
info : '@info'
},
controller: function($rootScope, $scope) {
$rootScope.info = $scope.info;
}
};
});
Поэтому я передаю значение, минуя любую изолированную область, перейдя непосредственно к $rootScope
, но это похоже на отговорку. По сути, я не знаю, какой контроллер или область действия могут быть выше по цепочке, поскольку мне нужно иметь возможность использовать этот компонент где угодно.
Еще одно решение состоит в том, чтобы иметь родительский контроллер для всей страницы, но это снова будет просто псевдокорневая область. Еще одним более громоздким решением было бы иметь две директивы или контроллера и обмениваться данными, используя события почти как шину. Это сработает, но давайте не будем этого делать.
Есть ли «чистый» способ сделать это?
/изменить
Вот чистое решение, которое должно работать (и в jsfiddle оно работает):
<body>
<div info="this is some info"></div>
<div>{{info}}</div>
</body>
app.directive('info', function() {
return {
restrict : 'A',
link: function(scope, element, attrs, ngModel) {
scope.info = attrs.info;
}
};
});
Однако в моем сценарии реальной жизни значение застряло где-то в цепочке. Возможно ли, что родительская директива с изолированной областью действия полностью блокирует каскад?
/edit2
Вот решение, которое, как я думал, наверняка сработает. Он включает в себя три директивы, одна из которых является родительской для обеих других. Комбинация предложенных решений в комментариях:
Однако в моем собственном коде это все еще не работает. Как бы просто это ни казалось, infoManager.info
остается undefined
.