Question

我已经获得了此指令，并且我试图让它重新加载自动获取的内容。到目前为止，运气不大。关心帮忙？

编辑：我已经尝试了建议的答案，但它没有成功。我收到$ digestx10错误。

一切正常并保存好，DOM就不会重新加载。

angular.module('mymodule').directive('chatContent',
    ["$compile",'localStorageService','loginService','peopleOnlineService', 
    function($compile, localStorageService, loginService, peopleOnlineService) {


var LoadData = function (data, userId) {
    var template = '';
    //localStorageService.IsUser(data.userId);

    if(localStorageService.IsUser(userId) === true){
       template = '<div class="feedItemChat"><div class="chatItem"><div class="chatMessage userChatMessage">{{content.chatMessage}}</div></div></div>';
    }else{
       template = '<div class="feedItemChat"><div class="chatItem"><div class="chatMessage otherChatMessage">{{content.chatMessage}}</div></div></div>';
    }
    return template;
};

var linker = function (scope, element) {

    var data = localStorageService.LoadDataLocal(localStorageService.CheckCorrectRoom(loginService.GetUser().userId, peopleOnlineService.GetParams().userId));

    scope.$watch(data, function(){
        element.html(LoadData(data,scope.content.userId)).show();
        $compile(element.contents())(scope);
    });
};

return {
    restrict: 'E',
    link: linker,
    scope: {
        content: '='
    }
};
}]);

我也想知道，如何在这里插入html模板，而不是愚蠢的长字符串？

Answer 1

注意：我没有解决DOM重新生成的问题，只是错误的$ watch设置。要解决摘要问题，请使用带有模板属性的常规指令，根据Petr Averyanov的评论。

而不是：

var data = localStorageService.LoadDataLocal(localStorageService.CheckCorrectRoom(loginService.GetUser().userId, peopleOnlineService.GetParams().userId));

scope.$watch(data, function(){
    /* ... */
});

尝试：

scope.$watch(
    function(){
        return localStorageService.LoadDataLocal(localStorageService.CheckCorrectRoom(loginService.GetUser().userId, peopleOnlineService.GetParams().userId));
    }, 
    function(newData){
        /* this code will run when LoadDataLocal returns a different value*/
    });

（请注意，我已经删除了data变量，而是在LoadData中使用$ watch newValue。）

Answer 2

带上很多盐，因为我是一个菜鸟，可能会遗漏一些东西......

我怀疑你是在错误的地方解决这个问题。 scope.content（在外部范围内）是否设置在Angular框架之外的某个位置？如果是这样，请将scope.content =...包装在$ scope。$ apply（）中以使框架触发任何监视。

我认为你根本不需要$ watch。只有在视图未引用您需要触发的更改时，才需要使用$ watch。每个{{表达式}}都会在表达式上创建一个监视。

考虑在指令上使用单个模板，并在模板中使用ng-class='...'中包含的“chatMessageClass”范围值。

这可以最大限度地减少您和浏览器的工作量。除非代码的其余部分有一些不明显的副作用，否则一切都消失了。

var linker = function (scope, element) {
    scope.chatMessageClass = localStorageService.IsUser(scope.content.userId) ? 
        'userChatMessage' : 'otherChatMessage';
};

参考文献： https://stackoverflow.com/a/15113029/685923 https://docs.angularjs.org/api/ng/directive/ngClass https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$应用

该指令从不重新加载其内容

2 个答案: