Angular Element's Scope not working as expected

Question

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

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
– charlietfl, Commented Nov 19, 2013 at 18:44
should read this ..how-do-i-think-in-angularjs-if-i-have-a-jquery-background — charlietfl
– charlietfl, Commented Nov 19, 2013 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
– Andy, Commented Nov 19, 2013 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
– Andy, Commented Nov 19, 2013 at 18:50
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
– m.e.conroy, Commented Nov 19, 2013 at 21:19

gion_13 · Accepted Answer · 2013-11-19 22:25:13Z

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() .

answered Nov 19, 2013 at 22:25

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy Over a year ago

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.

Collectives™ on Stack Overflow

Angular Element's Scope not working as expected

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related