2013-08-19 3 views
0

Если у вас есть директива, которую вы используете несколько раз на странице, как одна директива может связываться с другой?Угловая директива для директивного вызова

Я пытаюсь объединить директивы вместе в родительских отношениях с детьми. Когда нажата директива A, я хочу фильтровать директиву B, чтобы иметь только дочерние элементы выбранного элемента в директиве A. В этом случае на странице может быть бесконечное количество директив и отношений.

Обычно у меня была бы директива. Вызов метода фильтрации для каждого из его дочерних элементов, и каждый ребенок называет его дочерним, чтобы продолжить фильтрацию иерархии.

Но я не могу понять, можно ли вызвать методы из 1 директивы в другую.

Благодаря

ответ

1

Похоже, что вы ищете контроллер директивы. Вы можете использовать параметр require: директивы, чтобы вытащить контроллер другой директивы. Это выглядит следующим образом:

app.directive('foo', function() { 
    return { 
    restrict: 'A', 
    controller: function() { 
     this.qux = function() { 
      console.log("I'm from foo!"); 
     }; 
    }, 
    link: function(scope, element, attrs) { 

    } 
    }; 
}); 

app.directive('bar', function() { 
    return { 
     restrict: 'A', 
     require: '^foo', 
     link: function(scope, element, attrs, foo) { 
      foo.qux(); 
     } 
    }; 
}); 

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

(no prefix) - Locate the required controller on the current element. 
? - Attempt to locate the required controller, or return null if not found. 
^ - Locate the required controller by searching the element's parents. 
?^ - Attempt to locate the required controller by searching the element's parents, or return null if not found. 

Это jsbin моего примера. http://jsbin.com/aLikEF/1/edit

Другой вариант, который может работать для вас, - это иметь сервис, который каждая директива устанавливает часы и может манипулировать. Например, директива1 может просматривать свойство в службе и отвечать на изменения, а также настраивать кнопку, которая может изменить это свойство. Затем директива2 также может наблюдать и изменять сервис, и они будут реагировать друг на друга, но вы это настроили. Если вам нужен jsbin этого, просто дайте мне знать.

Надеюсь, это поможет!

+0

Большое спасибо. В этом случае мы повторно используем одну и ту же директиву для каждой таблицы, поэтому требование не будет работать (я не думаю?). Нам нужно сообщить таблице, какие таблицы являются ее дочерними элементами через переменную, и контроллеру необходимо будет динамически определять дочерние контроллеры через некоторый тип идентификатора (например, идентификатор элемента html). Это возможно? – jadent

+0

Хм. Вы можете найти области таким образом, очень легко. Это должно сделать это: var myScope = angular.element ('# myElement'). Scope() '. Я действительно не совсем понимаю, что вы здесь делаете. Это звучит довольно грязно. Другая мысль, которая звучит для меня, заключается в том, что вы можете использовать фабрику директивы - область здесь: '.directive ('myDirective', function() {// эта область !! return {' для чего-то вроде объекта или массива, который каждый run of the Directive может видеть, если в каждом прогоне есть какая-то общая информация, она может быть добавлена ​​к массиву или объекту для других пользователей. – m59

+0

@jadent Если это полезно, я был бы признателен за поддержку upvote/answer:) Я вижу, что кто-то еще уже сорвал половину моего ответа и использовал его для ответа. Также см. Здесь для традиционного использования сервисов для одновременного обновления свойств $ scope.http://stackoverflow.com/questions/18668239/controllers-not-talking-to-each-other-via-service-in-angular-js/18668305#18668305 – m59

0

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

Что-то вроде:

app.factory('selectedStuffService', function(){ 
    var allItems = []; 
    var selectedItems = []; 

    function addSelectedItem(item){ 
     selectedItems.push(item); 
    } 

    return { 
     allItems: allItems, 
     selectedItems: selectedItems, 
     addSelectedItem: addSelectedItem 
    } 
} 

взаимодействия в директиве Изменение значения в SelectedItems массива и директивы B может связываться с ней. Вы можете легко добавить другие методы в службу, чтобы фильтровать/манипулировать элементами по мере необходимости, и любая директива, использующая эту услугу, должна обновляться на основе изменений, внесенных другими директивами.

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