Undefined scope

angular.module('CrudApp', []).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/', {
    templateUrl: 'assets/tpl/lists.html',
    controller: ListCtrl
  }).
  when('/add-user', {
    templateUrl: 'assets/tpl/add-new.html',
    controller: AddCtrl
  }).
  otherwise({
    redirectTo: '/'
  });
}]);

function ListCtrl($scope, $http) {
  $http.get('api/users').success(function(data) {
    $scope.users = data;
  });
}

function AddCtrl($scope, $http, $location) {
  $scope.master = {};
  $scope.activePath = null;

  $scope.add_new = function(user, AddNewForm) {
    console.log(user);

    $http.post('api/add_user', user).success(function() {
      $scope.reset();
      $scope.activePath = $location.path('/');
    });

    $scope.deleteCustomer = function(customer) {
      $location.path('/');
      if (confirm("Are you sure to delete customer number: " + $scope.fld_Customer_Key) == true)
        services.deleteCustomer(customer.customerNumber);
    };

    $scope.reset = function() {
      $scope.user = angular.copy($scope.master);
    };

    $scope.reset();

  };
}
// Delete user

I am encountering an issue with the scope not being defined in my code and I can't seem to pinpoint the exact cause. All functions are functioning properly except for the delete customer function. Can anyone assist me in troubleshooting this problem?

Answer №1

Visit this Example

Check out this updated example with corrected syntax and dependencies installed. Your $scope is now working properly. Take a look at the example! :)

Markup:

<body ng-app="CrudApp">
  <div ng-controller="ListCtrl">
    List Controller displays: {{what}}
  </div>
  <div ng-controller="AddCtrl">
    Add Controller displays: {{what}}
  </div>
</body>

script.js

var app = angular.module('CrudApp', ['ngRoute']);

app.controller('ListCtrl', function ($scope, $http) {
  $scope.what = 'Rodrigo Souza is amazing';
  $http.get('api/users').success(function(data) {
    $scope.users = data;
  });

});

app.controller('AddCtrl', function ($scope, $http, $location) {
  $scope.what = 'Rodrigo Souza is talented';
  $scope.master = {};
  $scope.activePath = null;

  $scope.add_new = function(user, AddNewForm) {
    console.log(user);

    $http.post('api/add_user', user).success(function() {
      $scope.reset();
      $scope.activePath = $location.path('/');
    });

    $scope.deleteCustomer = function(customer) {
      $location.path('/');
      if (confirm("Are you sure to delete customer number: " + $scope.fld_Customer_Key) == true)
        services.deleteCustomer(customer.customerNumber);
    };

    $scope.reset = function() {
      $scope.user = angular.copy($scope.master);
    };

    $scope.reset();

  };

});

Visit this Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Node.js exceeds maximum call stack size while inspecting an objectlogging or debugging

After defining a class as shown below, I encountered an error stating RangeError: Maximum call stack size exceeded when attempting to review the properties of the Object. var Individual = (function () { function Individual(name, age) { this.na ...

Combining multiple requestBody in an AngularJS http.put request

Can AngularJS http.put method send multiple requestBody parameters to the server? Here is an example of my frontend Angular put method: function XY() { return $http.put(url, { data1: data1, data2: data2 }); And this is how my backend method is struct ...

What causes the element to load with a transparent appearance? And why is my JavaScript code overriding the hover effect on it?

My goal is to have an element fade out when clicked and then fade back in when its space is clicked again. I also want the opacity of the element to be 0.9 instead of 1 when visible. I've encountered two issues with my code. First, the hover selector ...

Handling onChange events for several typescript <Select> elements

As a non-TS developer, I'm delving into the realm of multiple selects and dropdown menus with Material-UI's select component. Progressing from a basic setup, I successfully implemented a single select but now face a challenge in adding another dr ...

Responsive design issues with Bootstrap 3 box layout

I am currently working on creating a bootstrap4 layout that includes three boxes arranged side by side on a wide screen. However, my goal is to ensure that if the screen size decreases, the red and green boxes always stay adjacent to each other while the b ...

Interacting with dynamically loaded HTML content within a div is restricted

On my main HTML page, I have implemented a functionality that allows loading other HTML pages into a specific div using jQuery. The code snippet looks like this: $('.controlPanelTab').click(function() { $(this).addClass('active').s ...

Is it possible to create a hyperlink on the second page that directs to the first page and triggers a specific JavaScript function on the first page?

Working with a former colleague's code in C#, asp.net MVC, Telerik/Kendo controls. I am trying to navigate to a specific section on a page from another page that uses tabs/sections with links at the top of the page to toggle visibility based on the se ...

How to incorporate template literals when sending JSON responses in Node.js?

Utilizing express and aiming to return some JSON, I am considering using a template literal. Here is my current approach: resp.status(201).json({ message: "Customer added to database", url: "http://localhost:5000/Customer/" + doc._id ...

What is Angular's approach to handling a dynamic and unprocessed JSON object?

When a JSON file is placed under assets, accessing it using something like http://localhost:4200/myapp.com/assets/hello.json will fetch the JSON file directly without any graphical user interface. This indicates that Angular must be able to return a raw JS ...

Creating a hover effect for a div in jQuery or CSS: Keeping the div visible even when hovered

I have two divs in my layout: one is titled "title" and the other is called "description". I successfully made the description div appear when hovering over the title div. You can see an example of this behavior in action on this fiddle Now, I want to cha ...

The statement "document.getElementById('grand_total_display').innerHTML = "Total is : $"+variable;" is causing issues in Internet Explorer versions 6 and 7

document.getElementById('grand_total_display).innerHTML = "Total is : $"+variable; seems to be causing an error specifically in IE6 and IE7 Within my HTML, I have an element <li> identified as grand_total_display which contains some existing te ...

What is the method for sending these variables via POST?

The code snippet referred to as New script is designed to produce two integer variables anchor and signed. I am interested in replacing the Old script with the New script, but there are significant differences between them. Inquiry How can I send/post t ...

What is causing the dysfunction of angular2 form when used with the HTML <form> tag?

Can someone explain the strange behavior of the <form> element in ng2 to me? I have noticed something odd and need some clarification :) To demonstrate, I have created a simple Plunker example at this link: https://plnkr.co/edit/vdrHJBNdd26y6YhPXTHD ...

The module 'node-sass' was not found, please address this issue

System: macOS High Sierra, version 10.13.2, node:v8.1.2 npm:5.0.3 Whenever I try to start my angularjs project using npm start, an error is thrown: ERROR in Cannot find module 'node-sass' Following this issue, I attempted the following: npm i ...

Missing callback pattern in NodeJS

When I spend hours writing NodeJS code, there's a common scenario that leaves me unsure of how to proceed. Take the following async function call (where we forget the necessary callback): function foo (callback) { // Perform a task and call callba ...

Erase all records using MongoDB by the following criteria or

I am currently working with a calendar document structured as shown below: calendar: [ {days: { 1: [], 2: ['surprise'], 3: [], ... }}, {days: { 1: [], 2: [], 3: ['test'], ... }} ] My task involves locating specific ...

Exploring Array Iteration and Incrementing with Easing Techniques

I am currently working on a function that involves iterating over an array and incrementing the values by varying amounts. The challenge is to decrease these incremental amounts as the values in the array get larger. Let's consider the following exam ...

What is the solution for fixing the '$ not defined error' in a .js file with $ajax code?

var example = document.createElement("SCRIPT"); example.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"; var nodeScript= document.createTextNode("function test() {console.log('test message');$.ajax({ type: \"POST&bs ...

Go to the identical page with a message embedded in it

Creating a login page using JSP involves an index.jsp file which contains the form and javascript scriplets. The connectivity to an Oracle database and validation of username and password are handled in check1.jsp. The problem arises after entering the us ...

Preserve the custom hook's return value in the component's state

I am currently facing a challenge in saving a value obtained from a custom hook, which fetches data from the server, into the state of a functional component using useState. This is necessary because I anticipate changes to this value, requiring a rerender ...