Динамическое имя NG-контроллера -- javascript поле с участием angularjs поле с участием angularjs-directive пол Связанный проблема

Dynamic NG-Controller Name


30
vote

проблема

русский

Я хочу динамически указать контроллер на основе конфигурации, которую мы загружаем. Что-то вроде этого:

 <код> <div ng-controller="{{config.controllerNameString}}>     ... </div>   

Как мне это сделать в угловом углу? Я думал, что это будет очень легко, но я могу найти способ сделать это.

Английский оригинал

I want to dynamically specify a controller based on a config that we load. Something like this:

<div ng-controller="{{config.controllerNameString}}>     ... </div> 

How do I do this in angular? I thought this would be very easy, but I can seem to find a way of doing this.

</div
        
         
         

Список ответов

33
 
vote
vote
Лучший ответ
 

Что вы хотите сделать, это иметь еще одну директиву, прежде чем что-то еще называется, получите имя контроллера из некоторой модели Удалите новую директиву и добавьте <код> ng-controller Directive, затем повторно скомпилируйте элемент.

Это похоже на это:

 <код> global.directive('dynamicCtrl', ['$compile', '$parse',function($compile, $parse) {   return {     restrict: 'A',     terminal: true,     priority: 100000,     link: function(scope, elem) {       var name = $parse(elem.attr('dynamic-ctrl'))(scope);       elem.removeAttr('dynamic-ctrl');       elem.attr('ng-controller', name);       $compile(elem)(scope);     }   }; }]);   

Тогда вы можете использовать его в вашем шаблоне, например:

 <код> <div dynamic-ctrl="'blankCtrl'">{{tyler}}</div>   

с контроллером, как это:

 <код> global.controller('blankCtrl',['$scope',function(tyler){     tyler.tyler = 'tyler';     tyler.tyler = 'chameleon'; }]);   

Вероятно, есть способ интерполирования значения (<код> $interpolate ) <код> dynamic-ctrl вместо того, чтобы разбирать его (<код> $parse ), но я не могу T получить его на работу по какой-либо причине.

 

What you want to do is have another directive run before anything else is called, get the controller name from some model remove the new directive and add the ng-controller directive, then re-compile the element.

That looks like this:

global.directive('dynamicCtrl', ['$compile', '$parse',function($compile, $parse) {   return {     restrict: 'A',     terminal: true,     priority: 100000,     link: function(scope, elem) {       var name = $parse(elem.attr('dynamic-ctrl'))(scope);       elem.removeAttr('dynamic-ctrl');       elem.attr('ng-controller', name);       $compile(elem)(scope);     }   }; }]); 

Then you could use it in your template, like so:

<div dynamic-ctrl="'blankCtrl'">{{tyler}}</div> 

with a controller like this:

global.controller('blankCtrl',['$scope',function(tyler){     tyler.tyler = 'tyler';     tyler.tyler = 'chameleon'; }]); 

There's probably a way of interpolating the value ($interpolate) of the dynamic-ctrl instead of parsing it ($parse), but I couldn't get it to work for some reason.

</div
 
 
   
   
5
 
vote

Я использую его в NG-Repeat, так что это улучшенный код для петлей и субъектов:

Шаблон:

 <код> <div class="col-xs6 col-sm-5 col-md-4 col-lg-3" ng-repeat="box in boxes"> <div ng-include src="'/assets/js/view/box_campaign.html'" ng-dynamic-controller="box.type"></div> </div>   

Директива:

 <код> mainApp.directive('ngDynamicController', ['$compile', '$parse',function($compile, $parse) {   return {       scope: {           name: '=ngDynamicController'       },       restrict: 'A',       terminal: true,       priority: 100000,       link: function(scope, elem, attrs) {           elem.attr('ng-controller', scope.name);           elem.removeAttr('ng-dynamic-controller');            $compile(elem)(scope);       }   }; }]);   
 

I'm using it in ng-repeat, so this is improved code for loops and sub objects:

Template:

<div class="col-xs6 col-sm-5 col-md-4 col-lg-3" ng-repeat="box in boxes"> <div ng-include src="'/assets/js/view/box_campaign.html'" ng-dynamic-controller="box.type"></div> </div> 

Directive:

mainApp.directive('ngDynamicController', ['$compile', '$parse',function($compile, $parse) {   return {       scope: {           name: '=ngDynamicController'       },       restrict: 'A',       terminal: true,       priority: 100000,       link: function(scope, elem, attrs) {           elem.attr('ng-controller', scope.name);           elem.removeAttr('ng-dynamic-controller');            $compile(elem)(scope);       }   }; }]); 
</div
 
 
     
     
2
 
vote

Лично 2 нынешних решения здесь не работали для меня, так как имя контроллера не будет известно при первом составлении элемента, но позже во время другого диварейного цикла. Поэтому я закончил использовать:

 <код> myapp.directive('dynamicController', ['$controller', function($controller) {   return {     restrict: 'A',     scope: true,     link: function(scope, elem, attrs) {       attrs.$observe('dynamicController', function(name) {         if (name) {           elem.data('$Controller', $controller(name, {             $scope: scope,             $element: elem,             $attrs: attrs           }));         }       });     }   }; }]);   
 

Personally the 2 current solutions here didn't work for me, as the name of the controller would not be known when first compiling the element but later on during another digest cycle. Therefore I ended up using:

myapp.directive('dynamicController', ['$controller', function($controller) {   return {     restrict: 'A',     scope: true,     link: function(scope, elem, attrs) {       attrs.$observe('dynamicController', function(name) {         if (name) {           elem.data('$Controller', $controller(name, {             $scope: scope,             $element: elem,             $attrs: attrs           }));         }       });     }   }; }]); 
</div
 
 

Связанный проблема

5  Экспорт SVG в PDF в автономном TideSDK WebApp  ( Exporting svg to pdf in a offline tidesdk webapp ) 
У меня есть приложение Offline HTML5 / CSS / JS, построенное с TIDESDK, в котором гистограмма нарисована с HighCharts в качестве SVG «Tag», используя данные, ...

3  Как реализовать автономный компонент в React Redux?  ( How to implement a self contained component in react redux ) 
Я создаю базу файлового менеджера Webui основы на React Redux (моя цель - это управлять React и Redux через этот проект) Как вы знаете, файловый менеджер ну...

0  Как проверить функцию в жасмине  ( How to test a function in jasmine ) 
Может кто-нибудь помочь мне, пожалуйста? Я пытаюсь проверить функцию, которая вызывает функции FireBase, но когда я вызываю основную функцию и начните управля...

1  Обработка ошибок METEOR для шаблона именования ошибок опечатки  ( Meteor error handling for template naming typo errors ) 
Недавно у меня была ошибка с именем, используемым в файле помощников. Поскольку используемое имя шаблона было недействительным, все мои глобальные помощники п...

12  Синтаксисная ошибка в видом на бритву при прохождении свойств модели в качестве параметров на функцию JavaScript  ( Syntax error in razor view when passing model properties as parameters to javasc ) 
Я получаю <код> Syntax error на каждой запятой (<код> , ) и на последнем кронштейне (<код> ) ) в следующем коде: <код> <script type="text/javascript"> ...

0  Почему это работает над сафари и Firefox, но не на хроме?  ( Why is this working on safari and firefox but not on chrome ) 
У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот з...

0  Ошибка прокладывания слайдера jQuery: ... не удалось конвертировать аргумент JavaScript ARG 0 [NSIDOMHTMLanChorElement.appendChild]  ( Jquery slider throwing error could not convert javascript argument arg 0 ns ) 
Наш сайт Dev Dev имеет ползунок отлично работает здесь: http://allblacks.01dev.co.nz/index.cfm layout = dnahome Однако мы просто поставили сайт Live, и ...

0  Нужен React Router Pro, чтобы помочь мне  ( Need a react router pro to help me ) 
Итак, сегодня я играл с маршрутизатором RACT и попытался изменить это Пример . Я хочу достичь этого: . Боковой NAV отображает только имена Когда пол...

21  Angularjs NG-модель внутри NG-Repeat имеет плохую производительность  ( Angularjs ng model inside ng repeat has poor performance ) 
У меня проблема с производительностью с угловой в следующем сценарии: <код> <div ng-repeat="a in array"> <input ng-model="something"> </div> Я писал к...

0  Попытка вернуть массив объектов для просмотра, получить «10 $ digest () итераций  ( Trying to return array of objects to view get 10 digest iterations reached ) 
Я пытаюсь создать токенизатор, где пользователь вводится в форматную строку, а пользовательский интерфейс дает им предварительный просмотр анализатора. Когда ...

11  Rx JS понимает метод подъема  ( Rx js understanding the lift method ) 
Я хочу создать новый оператор, и я нахожу в Документация То, что один из способов сделать что-то подобное: <код> class MyObservable extends Observable { ...

3  Рисование круга с помощью кинетических js  ( Drawing a circle using kinetic js ) 
Я пытаюсь построить очень базовую покраску, используя каркас kinetic JS. Все все идут хорошо, пока не попытался включить функцию формы, которая позволяет поль...

3  Angularjs: Как активировать первый ненулевой элемент в Ngrepeat?  ( Angularjs how to activate first non zero item in ngrepeat ) 
для объекта, такого как <код> notification: { "text":0, "image":2, "video":0 } У меня есть <код> ng-repeat ввиду <код> <div ng-repeat="items...

1  jquery адрес плагин  ( Jquery address plugin issue ) 
Я использую плагин jQuery Address, я реализовал плагин на странице списка, когда я нажимаю на одну из ссылок, функция будет вытащить данные, используя AJAX и ...

0  Запустить функцию JavaScript с использованием C #  ( Trigger javascript function using c sharp ) 
Я должен написать класс C #, который получает содержимое HTML-страницы (страница публичная) и запускает функцию JavaScript, которая загружает файл. Моя цель...

Связанный проблема

5  Экспорт SVG в PDF в автономном TideSDK WebApp 
3  Как реализовать автономный компонент в React Redux? 
0  Как проверить функцию в жасмине 
1  Обработка ошибок METEOR для шаблона именования ошибок опечатки 
12  Синтаксисная ошибка в видом на бритву при прохождении свойств модели в качестве параметров на функцию JavaScript 
0  Почему это работает над сафари и Firefox, но не на хроме? 
0  Ошибка прокладывания слайдера jQuery: ... не удалось конвертировать аргумент JavaScript ARG 0 [NSIDOMHTMLanChorElement.appendChild] 
0  Нужен React Router Pro, чтобы помочь мне 
21  Angularjs NG-модель внутри NG-Repeat имеет плохую производительность 
0  Попытка вернуть массив объектов для просмотра, получить «10 $ digest () итераций 
11  Rx JS понимает метод подъема 
3  Рисование круга с помощью кинетических js 
3  Angularjs: Как активировать первый ненулевой элемент в Ngrepeat? 
1  jquery адрес плагин 
0  Запустить функцию JavaScript с использованием C # 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.