AngularJS -使用服务方法的结果更新DOM

Question

我有这样的标记：

<div ng-controller="AutoDeployController as autoDeploy">
   <input type="text" ng-model="autoDeploy.message">
   <p>Message: {{ autoDeploy.message }}</p>
</div>

<button ng-click="autoDeploy.change()">change</button>

这种方法在我的控制器中：

model = this;

model.change = function(){
    model.message = AutoDeployService.returnOne();
};

此方法在我的服务模块中：

function returnOne(){
    return "one";
}

当我使用chrome调试它时，我可以看到model.message被更改为"one"，如果我键入文本框，它会更改model.message，任何其他带有model.message的字段都会动态更改.那么，当我单击按钮时，为什么DOM没有更新呢？

根据我使用按钮创建和添加DOM对象的经验，我觉得它可能涉及$compile或另一个系统变量，但我不确定何时/为什么使用系统变量。

Answer 1

问题是您的按钮在autoDeploy控制器之外。将该按钮移动到带有控制器的div中，它将调用change方法。

<div ng-controller="AutoDeployController as autoDeploy">
   <input type="text" ng-model="autoDeploy.message">
   <p>Message: {{ autoDeploy.message }}</p>
   <button ng-click="autoDeploy.change()">change</button>
</div>