AngularJS ng-model strange behavior

Question

I have a simple input with an ng-model to get the value of the input, here is my code :

angular
.module('thermofluor')
.directive('tm', tm)

tm.$inject = ['$timeout', '$q', '$rootScope', 'EVENTS'];

function tm($timeout, $q, $rootScope, EVENTS) {
var directive = {
    link: link,
    restrict: 'E',
    templateUrl: 'tm.html',
    scope: {
        hideTm : '=',
        canSaveTm: '='
    }
};

return directive;

function link(scope, element) {

    scope.calculateTm = calculateTm;
    scope.deleteTm = deleteTm;
    scope.saveTm = saveTm;

    scope.comment = "";

    /**
     * Broadcast a EVENTS.CALCULATE_TM
     */
    function calculateTm(){
        console.log('Broadcast CALCULATE_TM ..');
        $rootScope.$broadcast(EVENTS.CALCULATE_TM);
    }

    /**
     * Broadcast a EVENTS.DELETE_TM
     */
    function deleteTm(){
        console.log('Broadcast DELETE_TM ..');
        $rootScope.$broadcast(EVENTS.DELETE_TM);
    }

    /**
     * Broadcast a EVENTS.SAVE_TM
     */
    function saveTm(){
        console.log('Broadcast SAVE_TM ..');
        $rootScope.$broadcast(EVENTS.SAVE_TM, scope.comment);
    }
  }
}

And in the html template I have this :

 <input ng-model="comment" class="form-control" type="text" id="tm-comment" name="tm-comment" placeholder="Comment"/>
 <p>{{ comment }}</p>

The ng-model seems works fine, when I change the text in the input the paragraph under change too, but when I click on the button who throw the saveTm() function, in the function my values is the default one (""), and for example if the default was "test" the value in the function will be "test", even if I change it in the input.

Why ?

is the link function part of some directive or something similar? if it is, please post all of the code so we can see at least how scope is passed. — Emin Laletovic
– Emin Laletovic, Commented Jul 16, 2018 at 14:54
Yes it's a directive, but the scope.comment is created here, I edit with all the code — Spialdor
– Spialdor, Commented Jul 16, 2018 at 14:56
try this: scope: { hideTm : '=', canSaveTm: '=', comment: '=' } — Emin Laletovic
– Emin Laletovic, Commented Jul 16, 2018 at 15:00
Doesn't change, the scope here is to pass the variable from the html who call the directive — Spialdor
– Spialdor, Commented Jul 16, 2018 at 15:02
this part of the HTML you've posted is part of the directive? — Emin Laletovic
– Emin Laletovic, Commented Jul 16, 2018 at 15:02

belicam · Accepted Answer · 2018-07-16 16:15:43Z

I created a simple snippet trying to reproduce your problem, but it seems to work fine. Maybe you have a bug elsewhere (catching/processing broadcasted event).

// Code goes here

angular
.module('thermofluor', [])
.constant('EVENTS', {
  CALCULATE_TM: 'CALCULATE_TM',
  DELETE_TM: 'DELETE_TM',
  SAVE_TM: 'SAVE_TM'
})
.controller('AppController', AppController)
.directive('tm', tm)

AppController.$inject = ['$rootScope', 'EVENTS']

function AppController($rootScope, EVENTS) {
  var ctrl= this;
  $rootScope.$on(EVENTS.SAVE_TM, function(event, val) {
    console.log('$on SAVE_TM', val);
    ctrl.passed = val;
  })
}

tm.$inject = ['$timeout', '$q', '$rootScope', 'EVENTS'];

function tm($timeout, $q, $rootScope, EVENTS) {
var directive = {
    link: link,
    restrict: 'E',
    template: '<input ng-model="comment" class="form-control" type="text" id="tm-comment" name="tm-comment" placeholder="Comment"/><p>{{ comment }}</p><button type="button" ng-click="saveTm()">Save Tm</button>',
    scope: {
        hideTm : '=',
        canSaveTm: '='
    }
};

return directive;

function link(scope, element) {

    scope.calculateTm = calculateTm;
    scope.deleteTm = deleteTm;
    scope.saveTm = saveTm;

    scope.comment = "";

    /**
     * Broadcast a EVENTS.CALCULATE_TM
     */
    function calculateTm(){
        console.log('Broadcast CALCULATE_TM ..');
        $rootScope.$broadcast(EVENTS.CALCULATE_TM);
    }

    /**
     * Broadcast a EVENTS.DELETE_TM
     */
    function deleteTm(){
        console.log('Broadcast DELETE_TM ..');
        $rootScope.$broadcast(EVENTS.DELETE_TM);
    }

    /**
     * Broadcast a EVENTS.SAVE_TM
     */
    function saveTm(){
        console.log('Broadcast SAVE_TM ..');
        $rootScope.$broadcast(EVENTS.SAVE_TM, scope.comment);
    }
  }
}

<!DOCTYPE html>
<html ng-app="thermofluor">

  <head>
    <script data-require="[email protected]" data-semver="1.7.0" src="https://code.angularjs.org/1.7.0/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="AppController as appCtrl">
    <h1>Hello Plunker!</h1>
    <p ng-if="!!appCtrl.passed">Passed to app controller: {{appCtrl.passed}}</p>
    <tm></tm>
  </body>

</html>

I really still don't know why it's not working, so what I do is put the variable inside the function call in the directive HTML

Collectives™ on Stack Overflow

AngularJS ng-model strange behavior

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related