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

My JSON request seems to be malfunctioning and I can't figure out why

I've generated a URL that I need to forward to the police data API. var api_url="http://policeapi2.rkh.co.uk/api/locate-neighbourhood?q="+latlon; document.write(api_url); The URL functions correctly when manually entered into a browser, but I requir ...

The python-pyinstrument is in need of a javascript dependency that seems to

As I attempt to profile my Python program using pyinstrument, I encounter an error when trying to view the profile in HTML format. Traceback (most recent call last): File "/home/ananda/projects/product_pred/025200812_cpall_ai_ordering_model_v2/.venv ...

Utilizing the Vuex/Redux store pattern to efficiently share a centralized source of data between parent and child components, allowing for customizable variations of the data as

Understanding the advantages of utilizing a store pattern and establishing a single source of truth for data shared across components in an application is essential. Making API calls in a store action that can be called by components, rather than making se ...

Node.js routing issues leading to rendering failures

I have been working on a website that involves carpooling with drivers and passengers. When a driver submits their details, they are directed to a URL where they can select the passenger they want to ride with. Here is the code snippet I have written: ap ...

Guide on displaying the AJAX response in CakePHP 3.1

I'm working with a table that contains checkboxes. After selecting them, I want to calculate the sum of values from the table in a modal before confirming the form submission. Can someone guide me on how to render the AJAX response from the controller ...

Customize Magento pop-up close function on click event

I developed a unique module with a Magento pop-up feature. I am looking to customize the close event for the pop-up. <div onclick="Windows.close(&quot;browser_window_updatecc&quot;, event)" id="browser_window_updatecc_close" class="magento_clos ...

Efficiently Loading AJAX URLs using jQuery in Firefox

setInterval(function(){ if(current_url == ''){ window.location.hash = '#!/home'; current_url = window.location.hash.href; } else if(current_url !== window.location){ change_page(window.location.hash.split('#!/&apo ...

ng-click does not run when constructed as a string in the link function

Currently, I am utilizing Timeline JS to create a chronological timeline. I have integrated elements into the timeline and would like them to be clickable. Within my directive's link function, I am constructing the content of the clickable element in ...

Having difficulty accessing data in a JavaScript file within Odoo 9 platform

I have attempted to extract HTML content from JavaScript declared in my module. However, when I try to retrieve content by class name, all I can access is the header contents and not the kanban view. openerp.my_module = function(instance) { var heade ...

Determining when a checkbox changes state using HTML and JavaScript

My main objective is to display divX2 when the checkbox for x2 is checked, either by directly clicking on x2 or by clicking on the "Check All" checkbox. The functionality works as intended when the checkbox for x2 is clicked, but it fails to work when the ...

Tips for generating a node for the activator attribute within Vuetify?

Vuetify offers the 'activator' prop in multiple components like 'v-menu' and 'v-dialog', but there is limited information on how to create a node for it to function correctly. The documentation states: Designate a custom act ...

I am experiencing an issue where my JSON array is only returning the last element. Any suggestions on how to

I am facing an issue with my JSON array and Ajax code. Here is the snippet of my code where I upload an Excel file, convert it to JSON, then save it as a string in my database: function exportExcelToTable() { $('#upload-excel-convert').chang ...

Running a child process within a React application

I'm currently in search of the best module to use for running a child process from within a React application. Here's what I need: I want a button that, when clicked, will execute "npm test" for my application and generate a report that can be r ...

Why does the onBlur event function in Chrome but fails to work in Safari?

I've encountered a problem with the onBlur event in react-typescript. To replicate the issue, I clicked the upButton repeatedly to increase the number of nights to 9 or more, which is the maximum allowed. Upon further clicking the upButton, an error m ...

Unable to insert controller into routeprovider

Currently, I am working on an exercise in AngularJS to enhance my skills focusing on routes. However, I am facing issues with getting the controller attributes to function correctly inside the routed template. Despite reading numerous tutorials, the code s ...

Using mui-datatables to display an array of objects

Seeking help from users of mui-datatables. While it successfully handles data in the form of an array of strings, there is an issue when trying to load an array of objects resulting in the following error: bundle.js:126379 Uncaught (in promise) TypeEr ...

VueJS form validation does not account for empty inputs in both fields

One of the challenges I'm facing is generating a form with Vue.js using the input fields below: { name: 'first_name', type: 'text', label: 'First Name', placeholder: 'First Name', ...

Troubleshooting a Simple Angular Js Program: Uncovering the System Not Defined Error

I've been working on a basic program using Angular.js to display a name, but I keep encountering an error. HTML: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></scrip ...

Refresh a page automatically upon pressing the back button in Angular

I am currently working on an Angular 8 application with over 100 pages (components) that is specifically designed for the Chrome browser. However, I have encountered an issue where the CSS randomly gets distorted when I click the browser's back button ...

Using a vanilla JS object as a prop for a child component

I have created a custom Message class in my application to handle incoming messages, which is defined in message.js. Within message.js, I've implemented two classes: Message and EventEmit. The render function in my Message class requires passing an E ...