Обновление ng-include из директивы в Angular

Я пытаюсь щелкнуть элемент списка, который создается через ретранслятор, и обновить значение шаблона, которое используется ng-inlude. Начальное значение, заданное в контроллере, работает нормально (отображается в DOM), однако, когда я изменяю значение в директиве, оно не обновляет DOM (остается как исходный включенный DOM). Когда я использую ошибку огня в директиве, похоже, что область изменилась, хотя я не уверен, что мне что-то не хватает, или если я должен делать это по-другому.Обновление ng-include из директивы в Angular

Это мой частичный

<div ng-controller="menuCtrl" > 
    <ul class="sub-menu"> 
     <li ng-repeat="item in menuItems.left" menu-repeater-directive> 
      <span>{{item.name}}</span> 
      <a class="reset-menu-btn">&#215;</a> 
     </li> 
    </ul> 

    <div id="lft-wrapper" class="a-wrapper"> 
     <div ng-include="template.url" id="lft-scroller" class="a-scroller"></div> 
    </div> 

</div>

Это мое меню управления

angular 
.module('simApp') 
.controller("menuCtrl", function($scope, $element) { 

    $scope.menuItems = { 

     left: [ 
      { 
       name: "Table of Context", 
       url: "static/partials/tree.html" 
      }, 
      { 
       name: "Index", 
       url: "static/partials/dictionary.html" 
      }, 
      { 
       name: "Exercises", 
       url: "static/partials/exercises.html" 
      }, 
      { 
       name: "Search Results", 
       url: "static/partials/results.html" 
      } 

     ], 
     right: [ 

      { 
       name: "About Writer's Help", 
       url: "static/partials/about.html" 
      }, 
      { 
       name: "Tags & Tools", 
       url: "static/partials/tools.html" 
      }, 
      { 
       name: "Your Class", 
       url: "static/partials/class.html" 
      }, 
      { 
       name: "Top Ten", 
       url: "static/partials/top10.html" 
      } 


     ] 

    } 

    $scope.template = $scope.menuItems.left[0]; 


});

Это моя директива

angular 
    .module('simApp') 
    .directive("menuRepeaterDirective", function() { 
     return function(scope, element, attrs){ 

      var self = this; 
      this.scope = scope; 
      this.element = element; 

      var $ele = $(element); 
      $ele.find("span").fastClick(function(ev){ 

       //angular specific 
       var index = $(ev.currentTarget).parent().index(); 
       self.scope.template = self.scope.menuItems.left[index]; 
       //end angular specific 

       ....some other Jquery stuff 
      }); 


     } 
    });

источник

2014-01-25 abritez

Похоже, вы просто забыли применить изменения области действия, вызвав 'self.scope. $ Apply()'. Кроме того, элемент, переданный как аргумент, уже является элементом jQuery. Вызов $ (элемента) не нужен. –

Спасибо, я попробовал добавить var index = $ (ev.currentTarget) .parent(). Index(); self.scope.template = self.scope.menuItems.left [index]; self.scope. $ Apply(); Но не работал. Имеет ли значение, что $ scope.template происходит от родителя? Я не думаю, что это так, но не уверен. – abritez

Я бы начал с остановки с 'this' и' self'. Нет причин для их использования. Просто используйте аргументы scope и element, переданные функции. И я недостаточно эксперт, чтобы понять, что случилось, без рабочего примера. Пожалуйста, создайте plunkr. –

Try:

self.scope.$apply(function(){ //Use $apply to let angular aware of the changes. 
     var index = $(ev.currentTarget).parent().index(); 
     self.scope.$parent.template = self.scope.menuItems.left[index]; //accessing self.scope.$parent instead of self.scope 
});

DEMO

Объяснения, почему мы должны получить доступ к self.scope $ родителя:.

self.scope является областью текущего элемента, порожденным ng-repeat в то время как ваш ng-include является обязательным для охвата menuCtrl в. self.scope.$parent - это область менюCtrl в этом случае.

источник

2014-01-25 08:58:51

Обновление ng-include из директивы в Angular

ответ

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