Директива AngularJS не обновляется

Question

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

Я использую директиву для отображения метки:

directive('tag', function(){ 
    return { 
     restrict: 'AE', 
     templateUrl: tagDirective, 
     controller: 'TagController', 
     controllerAs: 'tagCtrl', 
     scope: { 
      tagId: '@id' 
     }, 
     replace:true 
    } 
}) 

Шаблон:

<div class="tag" ng-click="tagCtrl.filterByTag(tagId)"> 
    {{ tagCtrl.tags[tagId].title }} 
</div> 

Контроллер:

controller("TagController", ["TagService", "ModelService", "$location", function(tag, model, $location){ 
    var ctrl = this; 
    ctrl.tags = {}; 
    ctrl.tag = tag; 

    model.getTags(function(datas){ 
     datas.forEach(function(item){ 
      ctrl.tags["tag"+item.id] = item; 
     }); 
    }); 

    ctrl.filterByTag = function(id){ 
     tag.current = ctrl.tags[id]; 
     if($location.path() !== routes.index){ 
      $location.path(routes.index); 
     } 
    }; 
}]) 

И обслуживание:

service('TagService', [function(){ 
    var serv = this; 
    serv.current = {}; 
}]) 

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

Используемая тега фильтрации «хранится» в сервисе.

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

Моя проблема, когда я хочу, чтобы отобразить метку в заголовке:

<tag id="{{ 'tag'+headerCtrl.tag.current.id }}"></tag> 

Заголовок никогда не отображать название тега.

Я попытался это:

<tag id="{{ 'tag2' }}"></tag> 

заставить отображение второго тега (а не фильтрации, только отображение), и это не работает, либо ...

Я делаю что-то неправильно ?

Дочернее предприятие: Я использую AngularJS в правильном направлении? Есть ли какая-то передовая практика, которую я не использовал или не понял?

Спасибо!

Edit 1:

Я имел часть заголовка:

Директива:

directive("forumHeader", function(){ 
    return { 
     restrict: 'AE', 
     templateUrl: headerDirective, 
     controller: 'HeaderController', 
     controllerAs: 'headerCtrl', 
     replace:true 
    }; 
}) 

Html:

<header> 
    <tag tid="{{ 'tag'+headerCtrl.tag.current.id }}"></tag> 
</header> 

Контроллер:

controller("HeaderController", ["TagService", "ModelService", function(tag, model){ 
    var ctrl = this; 
    ctrl.tag = tag; 
    ctrl.tags = []; 

    model.getTags(function(datas){ 
     ctrl.tags = datas; 
    }); 

    ctrl.colored = function(item){ 
     if(item.color) return true; 
    }; 
}]) 

Answer 1

Контроллер директивы вводит область действия и элемент. Вы не вводите их. $scope.tagId - это то, где вы берете значение атрибута из (и используете его в шаблоне).

Answer 2

Я нашел грязное решение ...

Проблема здесь:

model.getTags(function(datas){ 
    datas.forEach(function(item){ 
     ctrl.tags["tag"+item.id] = item; 
    }); 
}); 

И в темпе приложения. Для службы, если выполняется вызов API, я возвращаю пустой массив, который будет заполняться позже. Но здесь я делаю разницу между массивом службы и структурой данных контроллера. Он не работает для заголовка тега, потому что вызов API запущен, поэтому массив пуст.

Чтобы решить эту проблему, я попытался в первый раз сохранить в контроллере и $ scope. $ Смотреть возвращаемые данные вызовов API и перераспределять в объекте контроллера в обратном вызове, но вызов вызывался только один раз, а не когда массив обновляется.

Итак, я сделал вторую сервисную функцию (getTagsObject), которая возвращает объект, который я хранил непосредственно в контроллере. Это работает, но это не очень чисто, я думаю.

Проблема возникла из моей Службы, а не из кода, который я покажу здесь, извините за путаницу. Вот код услуги:

serv.getTags = function(callback){ 
    callback = callback || function(){}; 
    var tag; 
    if(serv.tags.length === 0 && !tagsIndex["_running"]){ 
     tagsIndex["_running"] = true; 
     $http.get(tagReadAll) 
      .success(function(data){ 
       data.forEach(function(item){ 
        initTag(item); 
       }); 
       callback(serv.tags); 
       tagsIndex["_running"] = false; 
      }) 
      .error(function(data){ 
       tagsIndex["_running"] = false; 
      }); 
    } else { 
     callback(serv.tags); 
    } 
}; 

serv.getTagsObject = function(callback){ 
    if(serv.tags.length === 0) serv.getTags(); 
    callback(serv.tagsObj); 
}; 

И функция initTag:

function initTag(data){ 
    var tag = $.extend({}, data); 
    tagsIndex[tag.id] = tag; 
    serv.tagsObj["tag"+tag.id] = tag; 
    serv.tags.push(tag); 
    return tag; 
}