0

I have bellow definition of directive/controller. If you look, there's an onClick function defined. When function is being called, it can see this variable, with ftConditionButton bound to it as described by directive. The thing is, onClick doesn't see conditionButtonController which is against my understanding of JavaScript. Can someone explain to me what I am missing? Right now it looks to me like a new "Class" was created and was given all the methods of original controller. 

  angular
    .module('app')
    .directive('ftConditionButton', ftConditionButton);

  function ftConditionButton() {
    var directive = {
      restrict: 'A',
      scope: {},
      require: ['ftConditionButton'],
      templateUrl: 'conditionButton.html',
      controller: ConditionButtonController,
      controllerAs: 'conditionButtonController',
      bindToController: {
        ftConditionButton: '&'
      }
    };

    return directive;
  }

  function ConditionButtonController() {
    var conditionButtonController = this;
    conditionButtonController.onClick = onClick;

    ////////////////

    function onClick() {
      this.ftConditionButton; // this works
      conditionButtonController; // conditionButtonController is undefined
    }

  }
Claies
  • 22,124
  • 4
  • 53
  • 77
David
  • 3,190
  • 8
  • 25
  • 31

1 Answers1

0

Not sure what you're doing wrong. Seems okay to me.

Few things I can recommend:

1) Make sure you're using angularjs-1.4.

2) Always wrap everything into local function, such that you don't expose anything globally.

(function() {
    angular.module('experiment', [])
           .controller('MyController', function($scope){
              $scope.test = function() {
                alert("Test!");  
              };
    });

    angular
        .module('experiment')
        .directive('ftConditionButton', ftConditionButton);

      function ftConditionButton() {
        var directive = {
          template: '<button ng-click="conditionButtonController.onClick()">Hello </button>',
          restrict: 'A',
          scope: {},
          bindToController: {
            ftConditionButton: '&'
          },
          controller: ConditionButtonController,
          controllerAs: 'conditionButtonController',
        };

        return directive;
      }

      function ConditionButtonController($scope) {
        var conditionButtonController = this;
        conditionButtonController.onClick = onClick;

        function onClick() {
          conditionButtonController.ftConditionButton();
        }
      }
})();

and view:

<div ng-app="experiment">
  <div ng-controller="MyController">
      <div ft-condition-button="test()" />
  </div>
</div>

PS, use JSFiddle next time, to demonstrate your problem.

Erti-Chris Eelmaa
  • 25,338
  • 6
  • 61
  • 78
  • now I'm really confused, how can it be? Exactly the same code fails on my side http://i.imgur.com/6UIWTGg.jpg – David Sep 06 '15 at 09:25
  • also, tow of your points were already there, I just simplified it. – David Sep 06 '15 at 09:48
  • Found an answer, see the changes to JSFiddle I made, it produces the same error now. I'm still not sure why it is like that. http://fiddle.jshell.net/xbprtrxe/1/ – David Sep 06 '15 at 13:36
  • 1
    That is normal. That's how javascript works. You can't reference outer local variables in inner scope unless you use closures in the first place. If you don't have closure variable, you can't access these variables anymore. You can study this http://stackoverflow.com/questions/111102/how-do-javascript-closures-work – Erti-Chris Eelmaa Sep 06 '15 at 20:10