Angular Element's Scope not working as expected

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

Answers


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


Need Your Help

Downcasting a generic type in C# 3.5

c# .net generics downcasting

Why can I only upcast a generic and not downcast it?

Android notifications avoid unnecessary notification update

java android eclipse notifications

I'm using a service which are being called every single minute in the background. It fetches data using a HTTP Request and then notifies the user about the data via an Notification. The problem is ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.