1

I have an existing single page web app built as a roll-your-own jQuery app. I'm trying to incorporate angularjs but I'm running into some trouble.

I have some HTML links that I want to have jQuery register click handlers for, but have those links dynamically load an angular view into the DOM. Please see this plunk of what I'm trying to do. If I use ng-click (the Page 2 link), it works fine. However, I don't want to use ng-click because I want to execute my roll-your-own SPA routing code I wrote before employing angular. I was hoping to get the scope dynamically and trigger the same function that ng-click is triggering, but it's not working:

<a id="aPage1" href="#">Page 1 Is Not Working</a>
<a ng-click="nav('page2.html')" href="#">Page 2 is working with ng-click</a>

$('#aPage1').click(function(e) {
  // This triggers the correct function, but that function doesn't behave correctly
  angular.element(document.getElementById('main')).scope().nav($(this).attr('angularview'));
});

app.controller('HomeController', ['$scope', function($scope){
   $scope.nav = function(page) {
     $('#divContent').hide();
     $('#divNewContent').show();
     // This line only appears to work when called by ng-click
     $scope.template = page;
   };
}]);

If you debug the nav function inside of HomeController, the scope variable is set, and in fact, it looks to me to have the same properties as when it's triggered from ng-click, however binding doesn't work. What am I doing wrong?

Thanks for your help!

Andy

Andy
  • 2,709
  • 5
  • 37
  • 64
  • 4
    if you are using your own routing system, and manipulating DOM with jQuery....why are you using angular? Makes no sense to hack around a powerful framework creating hard to maintain code ...just to use a few features of the framework – charlietfl Nov 19 '13 at 18:44
  • should read this ..[how-do-i-think-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) – charlietfl Nov 19 '13 at 18:48
  • Re: charlietfl. Good question but I have significant features to add in this app that will take thousands of lines of jQuery but potentially much less code with angular. I want to employ angular for its separation of concerns and promise of minimal DOM manipulation. – Andy Nov 19 '13 at 18:48
  • Thanks I already read that article - it's a great post, but unfortunately I can't start my app from scratch. I've worked for 1 year on this app in jQuery, and want to add significant amounts of functionality with angular. I know this may not be typical, but green-field is not an option here. – Andy Nov 19 '13 at 18:50
  • regardless...what you have in question is very simply managed by angular , part of the ...`promise of minimal DOM manipulation` – charlietfl Nov 19 '13 at 18:51
  • 1
    If you continue to go this route you're going to have unmaintainable code, if you want to use Angularjs you should drop the jQuery code unless absolutely necessary and then you should confine it to an Angular directive. – m.e.conroy Nov 19 '13 at 21:19
  • To: m.e.conroy. The bulk of the code in our app is NOT the routing code, but code that governs functionality of individual pages. When the user displays a page, that page can be very complex and I would like to switch to angular to handle this complexity with good separation of concerns. I asked this question to get over the hump of the ugly itegration between jQuery and angular. I realize it's not ideal, but I don't have time to re-write all my routing code right now. – Andy Nov 19 '13 at 21:55
  • I'm looking to keep my routing, but use angular for everything else. It seems that people are saying use all angular or nothing. This seems pretty inflexible to me. – Andy Nov 19 '13 at 22:21
  • it's not about the routing. It's the way you handle events... it's just wrong and an overkill – gion_13 Nov 20 '13 at 07:04

1 Answers1

1

Although I do not encourage you to build a jquery app that;s using a feature of angular, you should know that any scope modification done without using one of angular's methods (such as watchers, ng-event directives ...) is not updated in the view.
To force angular to update the bindings, you should use $scope.$apply() .

gion_13
  • 41,171
  • 10
  • 96
  • 108
  • Thank you! Instead of setting $scope.template = page;, if I use $scope.$apply(function() { $scope.template = page; }), then it works great. I realize this isn't recommended, but this will help me get onto more mainstream angular development without having to throw away all my custom non-angular code. – Andy Nov 19 '13 at 22:38