0

I have a update panel in my master page which contains placeholder for child pages.

Parent.master

   <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server" EnableViewState="true" ViewStateMode="Enabled">
                        <ContentTemplate>
                            <asp:ContentPlaceHolder ID="CPH" runat="server"  >
                            </asp:ContentPlaceHolder>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddlClass" EventName="SelectedIndexChanged" />
                            <asp:AsyncPostBackTrigger ControlID="drpSubjects" EventName="SelectedIndexChanged" />
                        </Triggers>
    </asp:UpdatePanel>

In child pages I am using angular but the problem is for first load my scope is correct, but if I am updating something my scope is destroyed. I was invoking a function from angular controller through a DOM element which is outside the scope which is throwing exception.

<input type="checkbox" name="something" value="something" onchange="updateCheckBox(this)">

    function updateCheckBox(obj) { 
        angular.element('[ng-controller=ctrl]').scope().UpdateCheckBox(obj); 
    }

So to overcome this problem I am using following code in my document.ready event.

var mytempScope = angular.element('[ng-controller=ctrl]').scope();

Hence my updated function for updateCheckBox is

    function updateCheckBox() { 
       if (angular.element('[ng-controller=ctrl]').scope() == undefined)    
           mytempScope.UpdateCheckBox(); 
      else 
          angular.element('[ng-controller=ctrl]').scope().UpdateCheckBox(); 
}

This is working perfectly But I want to know is it correct way to ignore Lazy load problem for angular ?

Is there any other solution for this.

blue
  • 932
  • 7
  • 9
  • it's not really clear from the code that you have posted here what you are trying to do, but using `angular.element` to look for a JQuery object and try to find it's scope to call a function is a really nasty code smell. You shouldn't ever need to do this. – Claies Jul 29 '15 at 11:47
  • wow! You're using `asp:UpdatePanel`, I wouldn't even know where to begin... – gillyb Jul 29 '15 at 11:47
  • but now seriously, and trying to be more helpful - AngularJS is built to manage all aspects of the client side app, so asp's `UpdatePanel` wouldn't play nice with angular, and I think you would have a really hard time with it. Also, what @Claises wrote is also right. I would read a little about `angular.element` since you don't need the jQuery selector in it. And try to build your app without the need of `UpdatePanel` – gillyb Jul 29 '15 at 11:50
  • @Claies I just followed the answer posted by "BraveNewMath" in this question to get the scope from dom element http://stackoverflow.com/questions/13743058/how-to-access-the-angular-scope-variable-in-browsers-console – blue Jul 29 '15 at 11:55
  • yes, but that question was related to getting the scope element from outside the app, in the chrome developer console. Within the context of the app itself, you should always have access to the scope for the code you are working with. It's still a bad smell any time you are operating against the DOM in angular. – Claies Jul 29 '15 at 11:58
  • @gillyb building app without updatePanel is not possible. It's already developed application and I am maintaining it. I know updatePanel and angular don't like each other (LOL) but still I came to this solution. As it was new user story I used angular for the sake of current technology – blue Jul 29 '15 at 11:59
  • @Claies Ok I have edited the question, now may you please give me suggestion. – blue Jul 29 '15 at 12:02
  • that still doesn't make sense; the page already has access to scope, and the controller *should* already have access to `$scope`, using `angular.element` like this doesn't make sense, jquery or not, unless there is something on the HTML or controller that makes it necessary; but without seeing those, there isn't any case I can think of. – Claies Jul 29 '15 at 12:04
  • Now it is clear that I have a DOM element which is out of scope and calling angular function on event of that DOM element – blue Jul 29 '15 at 12:35
  • I've tried looking at this multiple ways and puzzling out what exactly it is you are trying to accomplish here, but I'm still very unclear what the relationship between that input box and your controller is. I suspect what you are *trying* to do is call a function on a controller from a button that is outside the controller's element tree, which isn't really supported. however, without a **complete** picture of the relationships these elements have, it's not really possible to know for sure. – Claies Jul 29 '15 at 21:43
  • I wonder what you want to know exactly. It's clear that there's a DOM element which need to call a function of angular controller. However this wasn't my concern which you have extended a lot. My concern was avoiding lazy load problem which is with update panel and angular's scope – blue Jul 30 '15 at 08:31

0 Answers0