AngularJS module not available問題及UpdatePanel問題

General
1

Hi:
我遇到了AngularJS module not available的問題，還有如何運用Updatepanel讓AngularJS可以順利運作，程式碼如下:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="./../js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="./../js/jQueryUI/jquery-ui-1.12.0.js"></script>
    <script type="text/javascript" src="./../js/AngularJS/angular_1.6.5.js"></script>
    <script type="text/javascript" src="./../BootsTrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        function load() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        }

        $(window).bind('beforeunload', function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        });


        function EndRequestHandler() {
            onloderfunction();
        }

        $(document).ready(function () {
            onloderfunction();
        });


        function onloderfunction() {
              var mod = angular.module("myApp", []);
                  mod.controller("MainController", function ($scope, $compile) {
             });

            angular.bootstrap($('#idAngular1'), ["myApp"]);
        }



        function triggerFunction(obj) {
            if (obj.checked) {
            }
            else {
            }
        }

    </script>
    <link href="./../js/jQueryUI/jquery-ui.css" rel="stylesheet" />
    <link href="./../css/jquery.ui.autocomplete.css" rel="stylesheet" />
    <link href="./../BootsTrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body onload="load()" ng-app="myApp" ng-controller="MainController">
    <form id="form1" runat="server">
        <cc3:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true"
            EnableScriptLocalization="true">
        </cc3:ToolkitScriptManager>
        <asp:HiddenField ID="hidCurrentTab" runat="server" />
        <div>
        </div>
        <div id="tabs">
         
            <div id="tabs-2">

                <asp:UpdatePanel ID="uppnlloaddata" runat="server" ChildrenAsTriggers="true">
                    <ContentTemplate>
                        <div id="idAngular1" data-ng-app="" data-ng-init="quantity=1;price=5">
                        <h2>Cost Calculator</h2>

                        Quantity:
                            <input type="number" ng-model="quantity">
                        Price:
                        <input type="number" ng-model="price">

                        <p><b>Total in dollar:</b> {{quantity * price}}</p>
                        </div>

                        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>

        </div>

    </form>


</body>
</html>

執行後會產生錯誤訊息，顯示module not available的錯誤，請問應該如何處理才能正常運作，
謝謝

2

UpdatePanel…:persevere: 這我真的沒轍了。

3

雖然對 UpdatePanel 不熟，不過感覺是因為你的 myApp 是在 onloaderfunction 才建立，而 angular 讀到 <body ng-app=“myApp”> 時就執行了，不過既然要用 angular.bootstrap，把 ng-app 拿掉應該就行了。

1個讚
4

那bootstrap中的module要如何設定，因為在這個例子中使用的是 data-ng-app="";
兩者可以並存嗎?

5

擇一就可以了，angular.bootstrap(document.body, [‘myApp’]) 跟 <body ng-app=“myApp”> 是同個意思，只是差別在於手動啟動，可以參考AngularJS: Developer Guide: Bootstrap

1個讚
6

謝謝你的幫忙