Как получить доступ к области контроллера из динамически созданной директивы

В основном я пытаюсь получить доступ к свойству области контроля из функции контроллера директивы. Я делаю это через $ parent свойство. Он отлично работает для статической директивы, но не для динамически созданной директивы. , пожалуйста, посмотрите на мой plunkerКак получить доступ к области контроллера из динамически созданной директивы

Dynamic Directive

В plunker, когда я нажимаю на папку с Id = 1. все идет хорошо, и путь к папке показывает, как «1 путь». То же самое касается папки с Id = 2. Но она не работает для динамически добавленной папки с Id = n

Я несколько новичок в угловой. Любая помощь приветствуется.

источник

2017-01-20 Bharat Sewani

Обновлено Ответ

В свете последнего требования:

Я пытаюсь вызвать функцию директиву (т.е. updateMap) от контроллера.

Вы можете использовать Service разделить переменные между контроллерами и изолированных директив. В приведенном ниже примере Сервис выполняет функцию, которая будет выполнена. Каждая директива при щелчке устанавливает функцию Сервиса на ее собственную функцию updateMap(). Затем контроллер в onFolderPathClicked() вызывает функцию Services executeFunction(), которая запускает ранее установленную функцию.

script.js:

var module = angular.module('testApp', []); 

module.service('updateMapService', function(){ 
    var updateMapFunction = null; 
    this.executeFunction = function(){ 
    updateMapFunction(); 
    }; 
    this.setFunction = function(fn){ 
    updateMapFunction = fn; 
    }; 
}); 
module.controller('crtl', function($scope, updateMapService) { 
    $scope.onFolderPathClicked = function(){ 
    updateMapService.executeFunction(); 
    }; 
}); 
module.directive('folder', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     id: '@', 
     folderPath: "=" 
    }, 
    template: '<p ng-click="onFolderClicked()">{{id}}</p>', 
    controller: function($scope, $element, updateMapService) { 
     $scope.onFolderClicked = function(){ 
     updateMapService.setFunction(updateMap); 
     addFolder(); 
     }; 
     var addFolder = function() { 
     $scope.folderPath = $scope.id + ":click here for calling update map"; 
     var el = $compile('<folder id="n" folder-path="folderPath"></folder>')($scope); 
     $element.parent().append(el); 
     }; 
     var updateMap = function() { 
     alert('inside updateMap()..' + $scope.id); 
     } 
    } 
    } 
});

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 
<body> 
    <div ng-app="testApp" ng-controller="crtl"> 
    <div>FolderPath : <a ng-click="onFolderPathClicked()">{{ folderPath }}</a> </div> 
    <folder id="1" folder-path="folderPath"></folder> 
    <folder id="2" folder-path="folderPath"></folder> 
    </div> 
</html>

Вы также можете переместить folder-path в службе, чтобы спасти от передачи его в качестве атрибута. Запах кода заключается в том, что передача его в качестве атрибута означает выполнение этого дважды, тогда как в службе это означает его установку и получение его один раз (повторное использование кода).

источник

2017-01-20 19:01:54

Большое спасибо Мэтью :). У меня есть еще одно сомнение. Я пытаюсь вызвать директивную функцию (например, updateMap) с контроллера. но я не могу получить область действия для каждой директивы. Пожалуйста, посмотрите мой плункер. [CallingControllerFnFromDirective] (https://plnkr.co/edit/xPp650yO6eWZWwxvKPj3?p=preview). Я могу обработать функцию щелчка контроллера из директивы (по мере того, как вы видите, что предупреждение появляется, когда я нажимаю на текст, нажмите здесь, чтобы позвонить по карте обновления), но правильная область действия директивы не проходит. Он всегда показывает Id как 2. Не могли бы вы помочь мне на этом –

@BharatSewani. Я обновил свой ответ в свете последнего требования. –

Как получить доступ к области контроллера из динамически созданной директивы

ответ

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