9

On a keyboard event I want to change the ng-include directive's src value dynamically.

Kate Gregory
  • 18,808
  • 8
  • 56
  • 85
D.S
  • 1,110
  • 3
  • 11
  • 26

1 Answers1

22

Here is a code example that could help you:

<div class="example-animate-container" ng-include="{{template.url}}">

Then in directive or controller 

$(document).on("keydown", function () {
    template.url = "put the value here";
    $scope.$apply();
});
Tushar
  • 85,780
  • 21
  • 159
  • 179
Ajay Beniwal
  • 18,857
  • 9
  • 81
  • 99
  • You seem like you might be able to answer a simliar question of mine here: http://stackoverflow.com/questions/17091713/dynamic-routing-angularjs – Dan Kanze Jun 13 '13 at 17:39
  • i have interpolated angular value in ng-include so when template.url will change ng-include will fetch the new url and on key press im changing template.url value which will update the source of ng-include automatically please give it a try and let me know if it solves your problem – Ajay Beniwal Jun 13 '13 at 17:48
  • I made it working by intercepting the keydown event in external jQuery keydown function, however as you said "Then in directive or controller", how can I do that? I mean, say I have a $scope.url variable in my controller, I want to write a keydown listener inside my same controller which will reset the $scope.url value on some keydown event. – D.S Jun 14 '13 at 04:29
  • if you go by angular standard you should avoid dom manipulation inside controller but still if you want to update dom inside controller then you can just use the keydown event inside the controller – Ajay Beniwal Jun 14 '13 at 05:07
  • 2
    I want to go by Angular way, so I won't put the dom manipulation inside controller. So where do I put it? in external jQuery script(like what I am doing now)? or in directive def? If directive def, then code example please. Thanks very much. – D.S Jun 14 '13 at 06:30
  • you should be definitley doing in directive see some examples here http://docs.angularjs.org/guide/directive – Ajay Beniwal Jun 14 '13 at 06:56
  • it's a better practise to write: $scope.$apply(function() { /* do what you want here*/ }) – Daniele Vrut Dec 20 '13 at 16:41