как использовать тот же компонент дважды в угловой странице Js html [duplicate]
Короткий ответ НЕТ, у нас на этом этапе в CSS нет parent selector, но если вы все равно не хотите менять элементы или классы, второй вариант использует JavaScript, что-то вроде этого:
var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));
activeATag.map(function(x) {
if(x.parentNode.tagName === 'LI') {
x.parentNode.style.color = 'red'; //your property: value;
}
});
или более короткий путь, если вы используете jQuery в своем приложении:
$('a.active').parents('li').css('color', 'red'); //your property: value;
2 ответа
Похоже, у вас есть глобальная переменная с именем $ widget здесь, попробуйте следующее:
var $widget = this;
вместо
$widget = this;
Это создает беспорядок, поскольку переменная $ widget имеет место ссылка на контроллер, который был недавно инициализирован, в этом случае контроллеру третьего компонента.
-
1О, вау, спасибо! – Jeffrey Roosendaal 8 November 2016 в 11:45
Проблема с вашим кодом заключается в том, что вы объявляете $widget в области окна, поэтому ваш контроллер печатает последнее значение, поскольку он был переопределен каждый раз, когда контроллер получал экземпляр. Используйте var $widget, а ваш код будет работать нормально.
Следующий фрагмент решает эту проблему:
angular.module('app', [])
.component('widgetList', {
templateUrl: 'template/widget/widget-list.html',
bindings: {
title: '@',
},
controllerAs: '$widget',
controller: WidgetListController
});
function WidgetListController($timeout) {
var $widget = this;
console.log('Title on init: ', $widget.title)
$timeout(function() {
console.log('Title after 3 seconds: ', $widget.title)
}, 3000)
$widget.doSomething = function() {
$widget.content = "Something";
}
}
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<widget-list title="Books" class="col-xs-12 col-md-4">
</widget-list>
<widget-list title="Movies" class="col-xs-12 col-md-4">
</widget-list>
<widget-list title="Albums" class="col-xs-12 col-md-4">
</widget-list>
<script type="text/ng-template" id="template/widget/widget-list.html">
<div class="widget widget-list">
<div class="panel b-a">
<div class="panel-heading b-b b-light">
<h5>{{$widget.title}}</h5>
<div class="pull-right">
<button type="button" class="btn btn-default btn-sm" ng-click="$widget.doSomething()">
Do something
</button>
</div>
</div>
<div class="panel-content">
{{$widget.content || 'No content'}}
</div>
</div>
</div>
</script>