Привязать директиву к свойству контроллера

Question

Привязать директиву к свойству контроллера

0

Новый для углового здесь:

Я хотел бы условно скрыть мою директиву NavBar, поэтому я добавил атрибут следующим образом:

 export function NavbarDirective() {

     'ngInject';

     let directive = {
         restrict: 'E',
         templateUrl: 'app/components/navbar/navbar.html',
         scope: {
             hidden: "="
         },
         controller: NavbarController,
         controllerAs: 'navBarVm',
         bindToController: true
     };

     return directive;
 }

 class NavbarController {

     constructor() {
         'ngInject';
     }
 }

И используйте его следующим образом:

<lb-navbar hidden="main.loading"></lb-navbar>

Однако, когда main.loading становится ложным, NavBar не появляется снова. Как я могу это исправить?

Пока что я только что завернул в div следующим образом:

<div ng-hide="vm.loading"> <lb-navbar hidden="main.loading"></lb-navbar> </div>

, однако, я ищу правильный способ создания привязки "pass by reference" в директиве.

Jasper Blues 16 май 2016, в 11:32

Источник

0

Могу ли я узнать, как вы использовали hidden переменную над HTML шаблона директивы?
Pankaj Parkar 16 май 2016, в 09:13

Теги:

javascript

ecmascript-6

html

angularjs

1 ответ

Ещё вопросы

Могу ли я узнать, как вы использовали hidden переменную над HTML шаблона директивы?

Yin Gang · Accepted Answer · 2016-05-16T07-59-00.000Z

Это не настоящий угловой вопрос.

Поскольку вы используете hidden для скрытия элемент, вам нужно удалить hidden attr вашей директивы, а не задавать hidden="false" когда вы хотите его снова открыть.

<div hidden="true">1.div with hidden="true" (you cant see me)</div>

<br />

<div hidden="false">2.div with hidden="false" (you cant see me)</div>

<br />

<div>3.div without hidden attr (you can only see me)</div>

Для вашего случая два решения,

1. Просто используйте ng-hide замените hidden :

<lb-navbar ng-hide="main.loading"></lb-navbar>

2. Другое имя, а не hidden для контроля видимости:

Ваша директива:

let directive = {
     restrict: 'E',
     templateUrl: 'app/components/navbar/navbar.html',
     scope: {
         myhidden: "="
     },
     controller: NavbarController,
     controllerAs: 'navBarVm',
     bindToController: true,
     link:function(scope,element,attrs){
         scope.$watch('myhidden',function(nv,ov){
             nv ? element.hide() : element.show();
             return false;
         });
     }
 };

И разметка:

<lb-navbar myhidden="main.loading"></lb-navbar>

Ах, конечно, все, что мне было нужно, уже было поддержано. Но спасибо, что показали мне, почему то, что я пытался сделать, тоже не сработало.
Возможно, я тоже начну определять пространство своих атрибутов, например, 'lb-hide'
Отлично, здорово сохранить пространство имен.