Одиночная угловая директива js и множество контроллеров

Question

Я хочу знать, как вызывать функцию, находящуюся в контроллере, в элементе шаблона ng-click. Я должен использовать эту директиву на многих страницах. Мне нужно обработать событие click на соответствующих страницах контроллера. Нижеприведенный код вызывает функцию click (moreitemdetails), находящуюся в директиве. Я попытался установить область как moreitemdetails: '='. Он также не работает.

Я использую директиву

app.directive('groceryList', function){ 

    return { 
     restrict: 'E', 
     scope: { 
      array: '=', 
      listItemClick:'&', 
      moreitemdetails: '&', 
     }, 
     templateUrl: 'list.html', 

     link: function(scope, element, attrs) { 
      scope.label = attrs.label; 
      scope.listItemClick=function(e){ 
       $(e.currentTarget).find('.next-items').slideToggle('fast'); 
      } 
      scope.moreitemdetails=function(name,type){ 
       //other code 
      } 
     } 
    }; 
}); 

Призыв директивы

<grocery-list array="items"></grocery-list> 

Это файл шаблона

<div ng-click="listItemClick($event)"> 
     <div> 
      <div class="item"> 
       <span class="item-details"> 
        {{array[0].Item}} 

       </span> 
       <span class="down-arrow"></span> 
      </div> 
      <div class="next-items"> 
       <ul> 
        <li class="item" ng-repeat="list in array"> 
         <div class="item-details" ng-click="moreitemdetails(list.Name,list.Type)">{{list.Item}}</div> 
        </li> 
       </ul> 
      </div> 

Есть ли способ обойти?

Я также хотел бы узнать, как использовать $ location в рамках другой директивы. Цитируя предыдущий пример (everythin такое же, за исключением определения директивы и действия в moreitemdetails())

app.ui.directive('groceryList', ['$location', function(location){ 
return { 
      restrict: 'E', 
      scope: { 
       array: '=', 
       listItemClick:'&', 
       moreitemdetails: '&', 
      }, 
      templateUrl: 'list.html', 

      link: function(scope, element, attrs) { 
       scope.label = attrs.label; 
       scope.listItemClick=function(e){ 
        $(e.currentTarget).find('.next-items').slideToggle('fast'); 
       } 
       scope.moreitemdetails=function(name,type){ 
        $location.path('/home/'); 
       } 
      } 
     }; 
}]); 

Заранее спасибо

Answer 1

Так, объявив

scope: { 
     array: '=', 
     listItemClick:'&', 
     moreitemdetails: '&', 
    }, 

вы создаете изолированную область для ваша директива. Одним из решений может быть не объявление этой области в вашей директиве. Это означало бы, что ваш ng-click = "moreitemdetails (list.Name, list.Type) вызовет функцию в области вашего контроллера.

В качестве альтернативы вы можете использовать излучатель и слушатель. Для этого в вашей директиве вы можно назвать:

scope.moreitemdetails=function(name,type){ 
    var deets = { 
     name: name, 
     type: type 
    }; 
    scope.emit('moreitemdetails',deets) 
} 

Тогда в ваших различных контроллерах вы реализуете:

scope.$on('moreitemdetails',function(event,details){ 
// do some code with your name and type 
} 

Я не уверен, что именно вы хотели бы знать о $ месте, если вы могли бы быть немного более конкретно я может быть в состоянии помочь больше.

Надеюсь, это поможет в некотором роде!

---

EDIT: директива без рамки заявленной будет выглядеть следующим образом:.

return { 
    restrict: 'E', 
    templateUrl: 'list.html', 
    link: function(scope, element, attrs) { 
     scope.label = attrs.label; 
     scope.listItemClick=function(e){ 
      $(e.currentTarget).find('.next-items').slideToggle('fast'); 
     } 
     scope.moreitemdetails=function(name,type){ 
      //other code 
     } 
    } 
};