0

Consider the following controller

angular.module('app')
    .controller('formCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.var = 1;

        $scope.updateData = function () {
            debugger; // <-- $scope is undefined here!
        }
    }]);

dirrective is as follows...

angular.module('app')
    .directive('formL', function() {
        return {
            restrict: 'E',
            scope: {
                items: '=info'
            },
            controller: 'formCtrl',
            templateUrl: 'js/form/form.html'
        };
    });

Template is the following

<form class="form-horizontal" ng-controller="formCtrl as controller">
    <input type="button" value="BTN" class="btn btn-success" ng-click="updateData()">
</form>

That does not seem to be the common problem (at least I did not found something simmilar in Google and on SO), when I hit button and get into controller $scope is undefined. And at the same time this is equal to $scope as it should be.

What should I do to make $scope be visible inside updateData?

PS. angular version is 1.6.5

UPDATE. I've change directive name from form to formL into above template. form is definetelly not the best name for a dirrective, but it's not the name I have in project, it's a bad simplification of the name for this question. So the problem is not caused by the name of dirrective

Eugeny89
  • 3,797
  • 7
  • 51
  • 98
  • 1
    I'm not sure, but "var" could be a reserved keyword. Try using another variable name. – m1crdy Dec 20 '17 at 09:48
  • @m1crdy no, as object attribute its absolutely ok to use `var`. – lin Dec 20 '17 at 09:50
  • 1
    rename `.directive('form',...` to something else, since directives can take form of ` `, making `
    ` your directive
     – Aleksey Solovey Dec 20 '17 at 09:57
  • 1
    By the way since you've been using latest AngularJS version it would be more convenient to use [components](https://docs.angularjs.org/guide/component) for this purpose. – korteee Dec 20 '17 at 10:06
  • definitely not the problem with module dependency? `angular.module('app')` - `angular.module('app', [])` – Aleksey Solovey Dec 20 '17 at 10:12

1 Answers1

3

The main problem is your directive element matching. It's an infinite loop because your directive template also includes the directive element form. So your directive getting binded again and again and again.

Please check this runnable DEMO FIDDLE and rename your directive element. Do not use form or modify your template and outsource the form element. You also do not need to define a ng-controller inside your form element, while your controller is defined by the directive near controller: 'formCtrl'.

View

<div>
   <my-form></my-form>
</div>

AngularJS application

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

myApp.controller('formCtrl', function ($scope) {

    $scope.btn = 'BTN';

    $scope.updateData = function () {
       $scope.btn = 'BTN clicked';
    }
});

myApp.directive('myForm', function () {
    return {
      restrict: 'E',
      replace: true,
      template: '<form class="form-horizontal"><input type="button" ng-value="btn" class="btn btn-success" ng-click="updateData()"></form>',
      controller: 'formCtrl'
    }
});

Update due to question update:

$scope is available inside your $scope function updateData(). Please compare your solution which mine above. `

lin
  • 17,956
  • 4
  • 59
  • 83
  • I came up to the same conclusion but the weird thing is that it should be throwing some errors while using the reserved directive name **form** but @Eugeny89 doesn't reference such thing. – korteee Dec 20 '17 at 10:01
  • @Korte it does throw an error. I think Eugeny89 did not take a look in the console. =) – lin Dec 20 '17 at 10:02
  • Yes I just noticed the same thing at a fiddle I was preparing but I tought something else was going on. Cheers – korteee Dec 20 '17 at 10:03
  • I've updated the question. `form` is definetelly not the best name for a dirrective, but it's not the name I have in project, it's a bad simplification of the name for this question. So the problem is not caused by the name of dirrective – Eugeny89 Dec 20 '17 at 10:16
  • @Eugeny89 I updated my answer. It should work for you. Please compare your solution with mine. Are there any errors thrown? Please check your console. – lin Dec 20 '17 at 10:16
  • @lin your solution helped. but the thing here is that if I have only `debugger` then `$scope` is `undefined` but if I put `$scope.btn = 'BTN clicked';` there `$scope` is not undefined! Have you an idea what can cause the problem? – Eugeny89 Dec 20 '17 at 10:28