как можно использовать ng-show -variable в директиве?
Обновление 2:
Это довольно сложно, поэтому просто добавил несколько вещей, чтобы объяснить, что я делаю:
Контроллер (только showBox):
$scope.showBox= false;
index.html
<div class="box-two" myDir="showBox" ng-show="showBox">
show only when showBox is true
</div>
<div class="panel panel-primary fixed-panel" my-dir data-update-method="'routePanelUpdate'">
Here is the content
</div>
и директива:
myApp.directive('myDir', function () {
return {
restrict: 'A',
scope: {
showDirective: '=myDir',
updateMethod: '=', // this togheter does not work
},
link: function (scope, element, attrs) {
this.routePanelUpdate = function (element) {
//here the box should be visible
scope.showDirective = true;
};
this[scope.updateMethod](element);
}
};
});
Как вы можете видеть, у меня есть метод update в области, и он вызывает метод, когда панель routePanel находится в фокусе (как элемент в ссылке). И в методе routePanelUpdate я хочу видеть showBox.
Как я могу использовать скрытое свойство здесь?
Если ваша цель - передать showBox
в вашу директиву, то все, что вам нужно сделать, это добавить его в область выделения
scope: {
showBox: "="
},
затем добавьте его в html в директиву
<div class="box-two" my-Dir showBox="showBox">
Теперь внутри вашей директивы вы получите доступ к showbox. "=" Связывает свойство области локального/директивного свойства с родительской областью. Поэтому изменение его в директиве изменило бы его вне и наоборот.
Вы собираетесь определить директиву с изолированной областью, поэтому вы не можете получить доступ к переменной showBox
определенной в контроллере MCtr
...
попробуй использовать:
angular
.module('test', [])
.controller('MyCtrl', function($scope) {
$scope.panels = [
{
id: 1,
text: 'Panel One',
hidden: false
},
{
id: 2,
text: 'Panel 2',
hidden: true
},
{
id: 3,
text: 'Panel 3',
hidden: false
},
{
id: 4,
text: 'Panel 4',
hidden: true
}
];
})
.directive('myDir', function() {
return {
restrict: 'A',
scope: {
panel: '=myDir'
},
link: function(iScope, iElement, iAttributes) {
iScope.panel.hidden = false;
}
};
});
.foo {
background: lightseagreen;
width: 40%;
margin: 5px;
box-sizing: border-box;
float: left;
color: #fff;
font-weight: bolder;
line-height: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="test">
<div ng-controller="MyCtrl">
<div ng-repeat="panel in panels" my-dir="panel" class="foo" ng-hide="panel.hidden">
<span ng-bind="panel.text"></span>
</div>
</div>
</article>