StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAngularJS directive does not update on scope variable changes
text
Body
copied!<p>I've tried to write a small directive, to wrap its contents with another template file.</p> <p>This code:</p> <pre><code><layout name="Default">My cool content</layout> </code></pre> <p>Should have this output:</p> <pre><code><div class="layoutDefault">My cool content</div> </code></pre> <p>Because the layout "Default" has this code:</p> <pre><code><div class="layoutDefault">{{content}}</div> </code></pre> <p>Here the code of the directive:</p> <pre><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)); }); } } </code></pre> <p>});</p> <p><strong>My problem:</strong></p> <p>When I'm using scope variables in template (in layout template or inside of layout tag), eg. <code>{{whatever}}</code> it just work initially. If I update the <code>whatever</code> variable, the directive is not updated anymore. The whole link function will just get triggered once.</p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload