ng-click not working after first click (embedded directives)

Jose Zamudio

I'm having issues with a button and ng-click. I have an input and a button with and ng-click that when click generates 3 random words. I display this words in a div generated by a directive.

The problem I'm having is that when I click the button the first time the code runs perfectly, but when I click again, the button does nothing, I had to implement a clear button that clears the $scopes and then the generate button works again.

This is the code for my button:

<button class="btn btn-default" type="button" ng-click='generateRandom()'>Generate</button>

Here is the code for the directive:

<div jz-tabs camel='camel' snake='snake' kebab='kebab'></div>

The $scope.generateRandom():

$scope.generateRandom = function() {
  var temp = '';
  Words.getWords($scope.number)
  .then(function(response) {
    console.log(response);
    response.data.forEach(function(e) {
      console.log(e);
      temp += ' ' + e.word;
    });

    $scope.camel = lodash.camelCase(temp);
    $scope.kebab = lodash.kebabCase(temp);
    $scope.snake = lodash.snakeCase(temp);
  });
};

I tried clearing the $scopes inside of the function but it looks like after the first ng-click, the function isn't even been called. Does having embedded directives affect ng-clicks?

Any help with this? I don't want to click "clear" every time I want to generate words, I want them to be able to click generate and get random words every time.

Thank you in advance!

UPDATE: Here is a plnkr of the problem: http://plnkr.co/edit/qGB1VjsIJgBzWKl8tXMt?p=preview

Jose Zamudio

I fixed the problem, I had this two functions:

$scope.generateRandom = function() {
  var temp = '';
  Words.getWords($scope.number)
  .then(function(response) {
    for (var i = 0; i < response.data.length; i++) {
      temp += ' ' +  response.data[i].word
    }

    $scope.camel = temp;
    $scope.kebab = temp;
    $scope.snake = temp;
  });
};

$scope.clear = function() {
  $scope.camel = '';
  $scope.kebab = '';
  $scope.snake = '';
};

All I had to do was add $scope.clear() at the end of the $scope.generateRandom function and it does the trick.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related