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，單擊Tag時將重定向（過濾不起作用，但肯定是另一個問題）。

我的問題是當我想在標題中顯示標簽時：

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

標頭從不顯示標簽標題。

我嘗試了這個：

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

強制顯示第二個標簽（不是過濾，僅顯示），它也不起作用...

難道我做錯了什么 ？

子公司：我是否以正確的方式使用AngularJS？ 是否有一些我沒有使用或誤解的最佳實踐？

謝謝 ！

編輯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是您$scope.tagId獲取屬性值（並在模板中使用它）的位置。

Answer 2

我找到了一個骯臟的解決方案...

問題在這里：

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

並以應用程序的節奏。 對於該服務，如果正在運行API調用，我將返回一個空數組，稍后將填充它。 但是在這里，我在服務數組和控制器數據結構之間有所不同。 對於Tag標頭，它不起作用，因為API調用正在運行，因此數組為空。

為了解決這個問題，我第一次嘗試在控制器和$ scope中存儲。$ watch API調用的返回數據，並在watch回調中將其重新分配在controller對象中，但是該回調僅被調用一次，而在數組已更新。

因此，我創建了第二個Service函數（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;
}