我尝试编写一个小指令,以将其内容包装在另一个模板文件中。
这段代码:
<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不知道,该指令使用范围变量,因此不会被更新。但是我不知道如何解决此问题。
您应该创建一个绑定范围变量并观察其变化:
return {
restrict: 'E',
scope: {
name: '='
},
link: function(scope) {
scope.$watch('name', function() {
// all the code here...
});
}
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句