AngularJS指令不会在范围变量更改时更新

Question

我尝试编写一个小指令，以将其内容包装在另一个模板文件中。

这段代码：

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

应该有以下输出：

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

因为布局“默认”具有以下代码：

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

这里的指令代码：

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));
            });
    }
}

}）;

我的问题：

例如，当我在模板（在布局模板中或在布局标签内部）中使用范围变量时。{{whatever}}它只是最初工作。如果我更新whatever变量，则该指令不再更新。整个链接功能只会被触发一次。

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

Answer 1

您应该创建一个绑定范围变量并观察其变化：

return {
   restrict: 'E',
   scope: {
     name: '='
   },
   link: function(scope) {
     scope.$watch('name', function() {
        // all the code here...
     });
   }
};