I am using Asp.Net MVC and angular. I have this in my ‘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);
});
}
});
and this code in my ‘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");
}
});
I am trying to invoke the controller action in my view using this code
<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">
<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>
I tried putting in the controller in the body tag like so: <body ng-app="MyApp" ng-controller="PrintController"> but still I cannot call the ‘addData()’ function. Can you please point out the right way to do it cause it’s not working for me. Thank you.
Source: AngularJS
from Angular Questions https://angularquestions.com/2017/10/16/my-ng-click-is-not-invoking-the-action-in-the-controller/
via @lzomedia #developer #freelance #web #lzomedia.com
No comments:
Post a Comment