从AngularJS控制器调用Android功能

时间:2014-11-04 11:05:03

标签: javascript android angularjs webview

我有一个问题,我需要一些帮助。我试图通过在我的前端使用角度控制器来调用android函数,但我无法让它工作。

MainActivity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = (WebView)findViewById(R.id.activity_main_webview);
    mWebView.setWebViewClient(new CustomWebViewClient());
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    mWebView.addJavascriptInterface(new AngularJSInterface(this), "Android");
    mWebView.loadUrl("http://192.168.70.101:3000/");

}

AngularJSInterface:

public class AngularJSInterface {

Context mContext;

AngularJSInterface(Context c) {
    mContext = c;
}

public void showToast(String toast) {
    Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}

}

角度控制器:

angular.module('app').controller('ComplaintCtrl', function ($scope, $http, complaintService) {

    $scope.showToast = function(toast) {
        Android.showToast(toast);
        console.log("toast");
}

});

HTML:

<button label="toast" ng-click="showToast('Visar toast från angularJS')">toast</button>

控制台出错:

ReferenceError: Android is not defined
at Scope.$scope.showToast (http://localhost:3000/scripts/controllers/addcomplaint.js:34:3)
at http://localhost:3000/bower_components/angular/angular.js:10567:21
at http://localhost:3000/bower_components/angular-touch/angular-touch.js:438:9
at Scope.$eval (http://localhost:3000/bower_components/angular/angular.js:12412:28)
at Scope.$apply (http://localhost:3000/bower_components/angular/angular.js:12510:23)
at HTMLButtonElement.<anonymous> (http://localhost:3000/bower_components/angular-touch/angular-touch.js:437:13)
at HTMLButtonElement.jQuery.event.dispatch (http://localhost:3000/bower_components/jquery/dist/jquery.js:4409:9)
at HTMLButtonElement.elemData.handle (http://localhost:3000/bower_components/jquery/dist/jquery.js:4095:28) 

这是我第一次使用这种东西而且我不太确定如何实际操作。我试过通过谷歌搜索寻找答案,但没有运气。我做错了什么?

1 个答案:

答案 0 :(得分:0)

将您的toast函数更改为static并直接调用它或首先实例化它。而且,您没有名为Android的类,而是创建了AngularJSInterface。将您Android.showToast更改为AngularJSInterface.showToast(如果使用静态)。