Question

我有一个带有ng-model的简单输入以获取输入的值，这是我的代码：

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);
    }
  }
}

在html模板中，我有这个：

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

当我更改输入中的文本时，ng-model似乎也可以正常工作，但是该段落也要更改，但是当我单击抛出saveTm（）函数的按钮时，该函数中的值是默认值（ “”），例如，如果默认值为“ test”，则即使我在输入中进行了更改，该函数中的值也将为“ test”。

为什么？

Answer 1

我创建了一个简单的代码段，试图重现您的问题，但它似乎运行良好。也许您在其他地方有一个错误（捕获/处理广播事件）。

// 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="angular.js@1.7.0" 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>

AngularJS ng-model奇怪的行为

1 个答案: