Angular: Controller can not find the Model

Question

Angular: Controller can not find the Model

Navigation

#1 by (2 votes)
#2 by (2 votes)

0

On my main page it shows me the error: Uncaught ReferenceError: Insidetv is not defined , that is, the Controller is not finding the Model file. But if I put the two in the same file it works perfectly.

On the main page you are first calling the Model and then the Controller and both pages are being found.

Model

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

Insidetv.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[{');
    $interpolateProvider.endSymbol('}]');
});

Controller

Insidetv.controller('ListaController', function($scope, $http) {
    $scope.dragStop = function(e, ui) {
        console.log('ok');
    }

    $('.drop').sortable({
        connectWith: "ul",
        revert: true,
        appendTo: '.lista',
        helper: 'clone',
        stop: $scope.dragStop
    });
});

javascript angularjs

asked by anonymous 16.01.2018 / 14:46

2 answers

2

Your Insidetv variable may not have been instantiated before you created your controller. Try to leave the javascript files always in order of loading.

But according to the angleguide styleguide in the part of modules You should not define a variable to encapsulate the module, but instead use chaining .

When using a module, avoid using a variable and instead use chaining with the getter syntax.

This way you solve two problems at once

16.01.2018 / 19:22

Performance Kotlin vs java and is it worth exchanging java for Kotlin? problems list in python

score 2 · Accepted Answer

As mentioned by Marcus Dacorrégio , it is not recommended to work this way.

The most correct would be to do something like this, each in its separate file:

// app.module.js
angular.module('Insidetv', []);

// app.config.js
angular.module('Insidetv')
   .config(function($interpolateProvider){
      $interpolateProvider.startSymbol('[{');
      $interpolateProvider.endSymbol('}]');
   });

// lista.controller.js
angular.module('Insidetv')
   .controller('ListaController', function($scope, $http) {
      $scope.dragStop = function(e, ui) {
         console.log('ok');
      }

      $('.drop').sortable({
         connectWith: "ul",
         revert: true,
         appendTo: '.lista',
         helper: 'clone',
         stop: $scope.dragStop
      });
});