动态更新范围变量。 角

Question

I have the following:

html

<div class="panel panel-default" ng-controller="firstController">
    <ul id="conversation">
        <li ng-repeat="msg in messages">{{msg}}</li>
    </ul>
</div>

js

var messages = [];
//Messages is updated everytime a message is sent.

var firstController = function($scope) {
    $scope.messages = messages;
}

app.controller("firstController", firstController);

I have a button that updates the global javascript messages variable. I need to update the $scope messages variable everytime my button is clicked. My controller only runs when the page first loads. How can I update $scope variables?

Answer 1

As it was suggested, you can use ng-click to invoke a function in the controller whenever the button is clicked. You can update the messages array within the function.

Below is a code example on how to do this. You can check this Fiddle to see it in action.

<div id="appContainer" ng-app="MyApp">
  <div ng-controller="MyController">
  <button ng-click="updateMessages();">Click Me</button>
    <div ng-repeat="msg in messages">
      <label>{{msg}}</label>
    </div>
  </div>
</div>


var app = angular.module('MyApp', []);

app.controller('MyController', ['$scope', function($scope) {
  $scope.messages = [];
    $scope.updateMessages = function() {
    $scope.messages.push('Date is: ' + new Date().toString());
  };
}]);