Question

请原谅我的英语不好。

我尝试使用controllerAs作为命名空间，而不是使用$ scope

一个小例子：

<html ng-app="MyApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="MainController as main">
   <input type="text" ng-model="main.number1" ng-change="main.calculate()"> + 
   <input type="text" ng-model="main.number2" ng-change="main.calculate()">
    <hr>
    <strong>{{main.number1Out}} + {{main.number2Out}} = {{main.result}}</strong>

    <hr>
    Counter: {{main.count}}
  </body>
</html>

angular.module('MyApp', []).

controller('MainController', function () {
  var self = this;

  this.number1 = 0;
  this.number2 = 0;

  this.calculate = function() {
    self.number1Out = parseFloat(self.number1);
    self.number2Out = parseFloat(self.number2);

    self.result = self.number1Out + self.number2Out;
  };
  this.calculate();



  self.count = 1;
  setInterval(function() {
    self.count++;
    console.log('count now: ' + self.count);
  }, 1000);
});

http://plnkr.co/edit/6xfcp7ndaXuZBnnCCrNL?p=preview

示例中的问题：如果输入字段的值发生更改，则只能在HTML中看到this.count的更改。

我该怎么办？（$ scope除外。$ apply（）或封装在Directive中）

第二个问题：

function ControllerOne() {
  this.text = 'Hallo Welt';
}

function ControllerTwo() {
  // is it possible?
  console.log(ControllerOne().text);
}

Answer 1

计数未更新的原因正是因为您修改了计数而未调用$apply()。所以你要做到这一点＆＃34;背后＆＃34; Angular，它无法知道模型已经改变，它必须重新评估表达式。

如果您不想使用$scope.$apply()，请使用$interval service而不是使用setInterval（），以便服务为您调用$apply()。额外的好处：单元测试会更容易。

Updated plunkr

在Controller中更改this.var不会更改HTML

1 个答案: