从 html 有条件地调用 angular 中的函数

Question

在我的聊天应用程序中，我想从 html 调用音频播放功能，只有当用户收到来自其他用户的消息时才会播放。

<div ng-bind-html="m.msg"> </div>

因此，我正在尝试的是每当值来自此 'm.msg' 时，我想调用一个将在后台播放声音的函数。

Answer 1

你需要做的就是使用angularjs手表。

angular.module('app', [])
  .controller('parentCtrl', function($scope) {
    $scope.m = {
      msg: ""
    };

  // Watch the msg. 
    $scope.$watch("m.msg", function(newVal, oldVal) {
     //In case it change call playAudio function
      if (newVal !== oldVal) {
    playAudio();
      }
    });
    
    function playAudio(){
     alert("Set Code for Play Audio here");
    }
  });

.msg-wim{
  background-color:white;
  width:100%;
  height:100px;
  border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="parentCtrl">
    <input type="text" ng-model="m.msg" placeholder="Type Text...">
    
    <hr>
    
    <h1>For each char u type in the textbox alert will display</h1>
    <div class="msg-wim" ng-bind="m.msg">
    </div>
  </div>
</div>

从 html 有条件地调用 angular 中的函数

conditionally call a function in angular from html

conditional

angularjs