angularjs - 如何在 UI 引起的范围变量更改时重新加载指令的模板

Question

我一直在尝试为模式创建指令，但我发现一旦指令模板初始化，通过 UI 进行的进一步更改将不会导致它更新。这是每次都显示的第一个缓存版本。

这是我的指令代码：

'use strict';

angular.module('sample')
.directive('modalPage', function ($timeout) {
    return {
        restrict: 'E',
        templateUrl: 'directives/sampleTemplate.html',
        scope: {
            data: '='
        },
        link: build
    };

    function build(scope, element, attrs) {
        scope.initData = function () {
            // does something that changes the value of var
        };
        scope.$watch('data', function (value) {
            if (value) {
                scope.initData();
            }
        }, true);
    }
});

我的模板 sampleTemplate.html 看起来像这样：

<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body" style="padding:5px!important;">
            <div class="card card-6">
                 <div class="card-heading">
                     <h2 class="title">{{ var }}</h2>
                 </div>
                 <div class="card-footer"></div>
            </div>
        </div>
    </div>
</div>

该指令首先会渲染模板页面（当 var 的值没有改变时），然后 UI 交互导致数据发生变化，调用 initData 并为 var 分配一个新值。模态仍然显示 var 的旧值。

我尝试使用 $compile() 并为更改 var 设置超时，但都没有奏效。之前的所有讨论也没有奏效。任何帮助表示赞赏。先感谢您！

标签： angularjsangularjs-directiveangularjs-templates