Question

我使用的是Asp.Net MVC和angular。我在'print-script.js'

中有这个

var MyApp = angular.module("MyApp", ['PrintService']);

MyApp.controller('PrintController', function ($scope, PrintApi) {

    $scope.addData = function() {
        alert("SDFS");
        var dataToAdd = {
            'Name': $scope.name,
            'Mobile': $scope.mobile
        };

        PrintApi.AddData(dataToAdd)
            .then(function(response) {
                alert(dataToAdd.Name + " - " + dataToAdd.Mobile);
            },
                function(error) {
                    alert('An error occured: ' + error.message);
                });
    }
});

和我的'print-service.js'中的代码

var PrintService = angular.module('PrintService', []);

PrintService.factory('PrintApi', function ($http) {

    var urlBase = "http://localhost:56720/";
    var PrintApi = {};

    PrintApi.AddData = function (qrData) {
        debugger;
        //return $http.post(urlBase + '/AddData/AddData/', qrData);
        alert("Print-service invoked");
    }
});

我正在尝试使用此代码在我的视图中调用控制器操作

<html>
<head >
    <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
    <link href="~/Content/mystyle.css" rel="stylesheet" />
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet"/>

    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/InternalScripts/print-script.js"></script>
    <script src="~/Scripts/InternalScripts/print-service.js"></script>

    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body ng-app="MyApp" ng-controller="PrintController">
    <section id="contact">
        <div class="section-content">
            <h1 class="section-header">Testing the <span class="content-header wow fadeIn " data-wow-delay="0.2s" data-wow-duration="2s"> Printing Service</span></h1>
            <h3>Dummy text of the printing and typesetting</h3>
        </div>
        <div class="contact-section">
            <div class="container">
                <div class="col-md-6 form-line">
                    <div class="form-group">
                        <label for="inputName">Your name</label>
                        <input type="text" ng-model="name" class="form-control" id="inputName" placeholder=" Enter Name">
                    </div>

                    <div class="form-group">
                        <label for="inputMobile">Mobile No.</label>
                        <input type="text" ng-model="mobile" class="form-control" id="inputMobile" placeholder=" Enter 10-digit mobile no.">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="description"> Message</label>
                        <textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
                    </div>
                    <div>
                        <button type="button" ng-click="addData()" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i>Print QR</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

我尝试将控制器放入body标签中，如下所示：<body ng-app="MyApp" ng-controller="PrintController">但我仍然无法调用'addData（）'函数。你能否指出正确的方法，因为它不适合我。谢谢。

Answer 1

var MyApp = angular.module("MyApp", []);
MyApp.service('testService', function(){
    this.sayHello= function(text){
        return "Service says \"Hello " + text + "\"";
    };        
    this.sayGoodbye = function(text){
        return "Service says \"Goodbye " + text + "\"";
    };   
});
MyApp.factory('PrintApi', function ($http) {
return {
    AddData(qrData) {
     var urlBase = "http://localhost:56720/";
        //return $http.post(urlBase + '/AddData/AddData/', qrData);
        alert("Print-service invoked");
    }
    }
});
MyApp.controller('PrintController', function ($scope,testService, PrintApi) {

    $scope.addData = function() {
        alert("SDFS");
        var dataToAdd = {
            'Name': $scope.name,
            'Mobile': $scope.mobile
        };

        PrintApi.AddData(dataToAdd)
            .then(function(response) {
                alert(dataToAdd.Name + " - " + dataToAdd.Mobile);
            },
                function(error) {
                    alert('An error occured: ' + error.message);
                });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head >
    
   

    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body ng-app="MyApp" ng-controller="PrintController">
    <section id="contact">
        <div class="section-content">
            <h1 class="section-header">Testing the <span class="content-header wow fadeIn " data-wow-delay="0.2s" data-wow-duration="2s"> Printing Service</span></h1>
            <h3>Dummy text of the printing and typesetting</h3>
        </div>
        <div class="contact-section">
            <div class="container">
                <div class="col-md-6 form-line">
                    <div class="form-group">
                        <label for="inputName">Your name</label>
                        <input type="text" ng-model="name" class="form-control" id="inputName" placeholder=" Enter Name">
                    </div>

                    <div class="form-group">
                        <label for="inputMobile">Mobile No.</label>
                        <input type="text" ng-model="mobile" class="form-control" id="inputMobile" placeholder=" Enter 10-digit mobile no.">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="description"> Message</label>
                        <textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
                    </div>
                    <div>
                        <button type="button" ng-click="addData()" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i>Print QR</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

我的ng-click没有调用控制器

1 个答案: