Может ли угловая директива содержать контроллер?

Или, может быть, вопрос лучше, должен директива содержит контроллер?Может ли угловая директива содержать контроллер?

Из-за разрыва мой index.html является простым файлом. Все делается в нем с помощью шаблонов. Так что мой index.html реально просто:

<body ng-app="myapp"><mainmenu></mainmenu><div ng-view></div></body>

Я действительно не нужна директива для mainmenu, но это позволяет мне поставить меню в отдельном файле шаблона. Главное меню содержит информацию о пользователе, логин/выход из системы и окно поиска.

<div class="leftmenu" ng-show="isLogin()"> 
    <ul class="menu"> 
     <li><a href="/part1">Part1</a></li> 
     <li><a href="/part2">Part2</a></li> 
     <li><a href="/part3">Part3</a></li> 
    </ul> 

    <div ng-controller="Search" class="Search><input type="text" ui-select2="s2opts" style="width:250px;" ng-model="search" data-placeholder="search"></input></div> 
</div> 

<div class="rightmenu"> 
    <ul ng-show="isLogin()" class="menu"> 
     <li><a href="/account">My Account</a></li> 
     <li><a href="/logout" ng-click="logout()">Logout</a></li> 
    </ul> 
    <ul ng-show="!isLogin()" class="menu"> 
     <li><a href="/login">Login</a></li> 
     <li><a href="/register">Register</a></li> 
    </ul> 
</div>

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

Разумеется, мои тесты на директиву mainmenu не пройдут, потому что SearchController не определен. Но это оставляет мне интересно, не собираюсь ли я это делать неправильно. Должен ли я иметь это так, раздел html с явным ng-controller, определенным внутри него? Разве это не создает всевозможные странные зависимости?

Как мне лучше структурировать это? A search директива, которая включена, поэтому я могу проверить ее отдельно? Что-то чувствует себя неправильно здесь структурно ...

UPDATE:

В соответствии с просьбой, основной скрипку: http://jsfiddle.net/nj4n44zx/1/

источник

2014-10-03 deitch

Если возможно, я бы добавил здесь предвзятый комментарий. Если вы говорите об отображении шаблонов шаблонов и т. Д., Я бы пошел с 'angular.ui.router'. Удивительная функция маршрутизации, потрясающий контроль состояния. И это облегчает тестирование. Кроме того, для меня директивы предназначены для повторного использования. Но все же, ваш выбор дизайна. – CozyAzure

Предвзятое хорошее; по крайней мере, это то, с чем я могу согласиться или не согласен. Беспристрастность скучна. :-) Итак, возможно, вы правы, я еще раз посмотрю на angular.ui.router (так как я использую много углов.уи). Но я хотел бы решить главный архитектурный вопрос в любом случае. – deitch

, как указано в Angular документации, лучшая практика, чтобы определить контроллер внутри директивы только разоблачить API в другой директивы. В противном случае функция связи достаточно.

см в нижней части:

Angular directives

По опыту использования контроллеров внутри директив тени, что вы делаете в своей области. Это не помогает иметь легко читаемый код.

Я предпочитаю использовать главный контроллер, в который включена директива. С неизолированной областью вы имеете доступ ко всему от функции связи.

источник

2014-10-03 08:26:51 benek

то, что вы говорите, имеет смысл. Как бы вы реорганизовали выше, чтобы иметь смысл? Это то, с чем я борюсь? – deitch

В зависимости от того, что вы делаете в своем контроллере поиска ... Я бы хотел определить контроллер на уровне тела, в верхней части этой директивы. В другом - иметь место, где делается логика, доступная для директивы. Также важно: логика поиска может быть включена в сервис. Директива не является единственным местом для повторного использования. JSFiddle, мы сможем дать полную реализацию. – benek

Я буду возиться с ним, спасибо. Поднимаясь ... – deitch

Я обычно имеют дело с ним так:

app.directive('topMenu', function() { 
    return { 
     restrict: 'E', // or whatever You need 
     templateUrl: '/partials/topmenu', //url to Your template file 
     controller: function($scope) { 
      $scope.foo = "bar"; 
     } 
    }; 
});

Затем, в этом шаблоне Вам не нужно добавлять ng-контроллер.

источник

2014-10-03 08:16:01 Jarema

Я думаю, что я был не очень ясен. Существует часть меню, а затем есть поиск, который сам по себе является отдельным элементом со своим собственным контроллером. Я редактировал сообщение. – deitch

, что ваша директива может содержать контроллер, потому что вы объявляете директиву, как этот

myApp.directive('mainMenu', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: true, 
     templateUrl: 'menu.html', 
     controller:['$scope', function($scope) { 
      //define your controller here 
     }] 
    }; 
});

источник

2014-10-03 08:16:58

Может ли угловая директива содержать контроллер?

ответ

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