AngularJS指令不就范围变量的变化更新 [英] AngularJS directive does not update on scope variable changes

问题描述

我试图写一个小的指令，与另一模板文件来包装其内容。

I've tried to write a small directive, to wrap its contents with another template file.

这code：

<layout name="Default">My cool content</layout>

应该有这样的输出：

Should have this output:

<div class="layoutDefault">My cool content</div>

由于布局默认有这个code：

Because the layout "Default" has this code:

<div class="layoutDefault">{{content}}</div>

下面指令的code：

app.directive('layout', function($http, $compile){
return {
    restrict: 'E',
    link: function(scope, element, attributes) {
        var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
        $http.get(scope.constants.pathLayouts + layoutName + '.html')
            .success(function(layout){
                var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
                var result = regexp.exec(layout);

                var templateWithLayout = result[1] + element.html() + result[2];
                element.html($compile(templateWithLayout)(scope));
            });
    }
}

}）;

我的问题：

当我使用的模板（在布局模板或布局标签内），如范围的变量。 {{}任何} 它只是初步工作。如果我更新任何变量，该指令不更新了。整个链接功能将只被触发一次。

When I'm using scope variables in template (in layout template or inside of layout tag), eg. {{whatever}} it just work initially. If I update the whatever variable, the directive is not updated anymore. The whole link function will just get triggered once.

我认为，AngularJS不知道，这个指令使用范围变量，因此它不会被更新。但我不知道如何解决这个问题。

I think, that AngularJS does not know, that this directive uses scope variables and therefore it will not be updated. But I have no clue how to fix this behavior.

推荐答案

我需要针对此问题的解决方案，以及和我以前在这个线程的答案拿出如下：

I needed a solution for this issue as well and I used the answers in this thread to come up with the following:

.directive('tpReport', ['$parse', '$http', '$compile', '$templateCache', function($parse, $http, $compile, $templateCache)
    {
        var getTemplateUrl = function(type)
        {
            var templateUrl = '';

            switch (type)
            {
                case 1: // Table
                    templateUrl = 'modules/tpReport/directives/table-report.tpl.html';
                    break;
                case 0:
                    templateUrl = 'modules/tpReport/directives/default.tpl.html';
                    break;
                default:
                    templateUrl = '';
                    console.log("Type not defined for tpReport");
                    break;
            }

            return templateUrl;
        };

        var linker = function (scope, element, attrs)
        {

            scope.$watch('data', function(){
                var templateUrl = getTemplateUrl(scope.data[0].typeID);
                var data = $templateCache.get(templateUrl);
                element.html(data);
                $compile(element.contents())(scope);

            });



        };

        return {
            controller: 'tpReportCtrl',
            template: '<div>{{data}}</div>',
            // Remove all existing content of the directive.
            transclude: true,
            restrict: "E",
            scope: {
                data: '='
            },
            link: linker
        };
    }])
    ;

在HTML：

<tp-report data='data'></tp-report>

此指令用于基于从服务器中检索数据集动态加载的报告模板。

This directive is used for dynamically loading report templates based on the dataset retrieved from the server.

它设置在scope.data物业的手表，每当这个被更新（当用户从​​服务器请求一个新的数据集），它加载相应的指令来显示数据。

It sets a watch on the scope.data property and whenever this gets updated (when the users requests a new dataset from the server) it loads the corresponding directive to show the data.

这篇关于AngularJS指令不就范围变量的变化更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！