AngularJS无法在Xamarin Android Webview中使用

Lew*_*Hai 6 javascript c# android xamarin.android angularjs

我正在尝试将页面内容加载到webview,页面内容引用AngularJS和Angular Material.当我在计算机上的调试中运行它时,它可以通过Android模拟器正常工作.但是当我在智能手机上安装它时,它不起作用.它似乎不知道JavaScript库.非常感谢您的帮助.

MainActivity.cs:

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.Main);

        var webView = FindViewById<WebView>(Resource.Id.webView);
        webView.Settings.JavaScriptEnabled = true;
        //webView.Settings.CacheMode = CacheModes.Normal;
        webView.Settings.DomStorageEnabled = true;
        webView.Settings.SetSupportMultipleWindows(true);
        webView.Settings.JavaScriptCanOpenWindowsAutomatically = true;
        webView.Settings.AllowContentAccess = true;
        webView.Settings.AllowFileAccess = true;
        webView.Settings.AllowFileAccessFromFileURLs = true;
        // webView.SetWebChromeClient(new WebChromeClient());
        webView.SetWebViewClient(new WebViewClient());


        webView.LoadUrl("file:///android_asset/Content/List.html");

    } 
Run Code Online (Sandbox Code Playgroud)

List.html:

<html>
<head>
    <title>Angular JS Directive</title>
    <link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="stylesheet"></link>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>
    <style type="text/css">
        .listdemoListControls md-divider {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .listdemoListControls md-list-item > p, .listdemoListControls md-list-item > .md-list-item-inner > p, .listdemoListControls md-list-item .md-list-item-inner > p, .listdemoListControls md-list-item .md-list-item-inner > .md-list-item-inner > p {
            -webkit-user-select: none;
            /* Chrome all / Safari all */
            -moz-user-select: none;
            /* Firefox all */
            -ms-user-select: none;
            /* IE 10+ */
            user-select: none;
            /* Likely future */
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

    <script>

         angular.module('MyForm', ['ngMaterial'])
         .config(function($mdIconProvider) {
          $mdIconProvider
           .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
           .iconSet('device', 'img/icons/sets/device-icons.svg', 24)
           .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
           .defaultIconSet('img/icons/sets/core-icons.svg', 24);
         })
         .controller('ListCtrl', function($scope, $mdDialog) {
          $scope.liststudent= [
                  { name: 'Kevin', isgirl: false },
                  { name: 'Sara', isgirl: true},
                  { name: 'Bob', isgirl: false },
                  { name: 'Laura', isgirl: true },
                  { name: 'Peter', isgirl: false }
               ];
         });
    </script>
</head>
<body ng-app="MyForm">
    <md-list ng-cloak="" ng-controller="ListCtrl">
        <md-subheader class="md-no-sticky">Student list</md-subheader>
        <md-list-item ng-repeat="topping in liststudent">
            {{ topping.name }} <br />
            <md-checkbox class="md-secondary" ng-model="topping.isgirl"></md-checkbox>
        </md-list-item>
        <md-divider></md-divider>
        <md-list>

        </md-list>
    </md-list>
</body>
</html> 
Run Code Online (Sandbox Code Playgroud)

截图在手机上运行:

在此输入图像描述 截图在计算机上运行:

在此输入图像描述

Bar*_*rak 2

这可能是与网络相关的问题。您是否尝试过将库复制到本地?

附言。我还没有足够的声誉来发表评论,所以我将此作为答案发布。哈哈